css3-鼠标经过产品列表图片放大显示文字（兼容IE9以上不含IE9）

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="UTF-8" />

    <title>实例: css3技巧——产品列表之鼠标滑过效果</title>

    <style>

        .main *{

            padding:0;

            margin:0;

            font-family:'Source Code Pro', Menlo, Consolas, Monaco, monospace;

            box-sizing: content-box;

            -webkit-box-sizing: content-box;

        }

        .main {

            position: relative;

            width: 680px;

            margin: 0 auto;

        }

        .view {

            width: 300px;

            margin: 10px;

            float: left;

            border: 10px solid #fff;

            overflow: hidden;

            position: relative;

            text-align: center;

            -webkit-box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6;

            -moz-box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6;

            box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6;

            cursor: default;

        }

        .view .mask{

            width: 300px;

            height: 200px;

            position: absolute;

            overflow: hidden;

            top: 0;

            left: 0;

        }

        .view img {

            display: block;

            position: relative;

            max-width:100%;

        }

        .view h2 {

            text-transform: uppercase;

            color: #fff;

            text-align: center;

            position: relative;

            font-size: 17px;

            padding: 10px;

            background: rgba(0, 0, 0, 0.8);

            margin: 20px 0 0 0;

        }

        .view p {

            font-size: 12px;

            position: relative;

            color: #fff;

            padding: 10px 20px 20px;

            text-align: left;

        }

        .view .link {

            display: inline-block;

            text-decoration: none;

            padding: 7px 14px;

            background: #000;

            color: #fff;

            text-transform: uppercase;

            -webkit-box-shadow: 0 0 1px #000;

            -moz-box-shadow: 0 0 1px #000;

            box-shadow: 0 0 1px #000;

            font-size: 14px;

        }

        .view .link:hover {

            -webkit-box-shadow: 0 0 5px #000;

            -moz-box-shadow: 0 0 5px #000;

            box-shadow: 0 0 5px #000;

        }

        .view-tenth img {

            -webkit-transform: scaleY(1);

            -moz-transform: scaleY(1);

            -o-transform: scaleY(1);

            -ms-transform: scaleY(1);

            transform: scaleY(1);

            -webkit-transition: all 0.7s ease-in-out;

            -moz-transition: all 0.7s ease-in-out;

            -o-transition: all 0.7s ease-in-out;

            -ms-transition: all 0.7s ease-in-out;

            transition: all 0.7s ease-in-out;

        }

        .view-tenth .mask {

            background-color: rgba(249, 179, 255, 0.3);

            -webkit-transition: all 0.5s linear;

            -moz-transition: all 0.5s linear;

            -o-transition: all 0.5s linear;

            -ms-transition: all 0.5s linear;

            transition: all 0.5s linear;

            -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

            filter: alpha(opacity=0);

            opacity: 0;

        }

        .view-tenth h2 {

            border-bottom: 1px solid rgba(0, 0, 0, 0.3);

            background: transparent;

            margin: 20px 40px 0px 40px;

            -webkit-transform: scale(0);

            -moz-transform: scale(0);

            -o-transform: scale(0);

            -ms-transform: scale(0);

            transform: scale(0);

            color: #333;

            -webkit-transition: all 0.5s linear;

            -moz-transition: all 0.5s linear;

            -o-transition: all 0.5s linear;

            -ms-transition: all 0.5s linear;

            transition: all 0.5s linear;

            -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

            filter: alpha(opacity=0);

            opacity: 0;

        }

        .view-tenth p {

            color: #333;

            -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

            filter: alpha(opacity=0);

            opacity: 0;

            -webkit-transform: scale(0);

            -moz-transform: scale(0);

            -o-transform: scale(0);

            -ms-transform: scale(0);

            transform: scale(0);

            -webkit-transition: all 0.5s linear;

            -moz-transition: all 0.5s linear;

            -o-transition: all 0.5s linear;

            -ms-transition: all 0.5s linear;

            transition: all 0.5s linear;

        }

        .view-tenth .link {

            -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

            filter: alpha(opacity=0);

            opacity: 0;

            -webkit-transform: scale(0);

            -moz-transform: scale(0);

            -o-transform: scale(0);

            -ms-transform: scale(0);

            transform: scale(0);

            -webkit-transition: all 0.5s linear;

            -moz-transition: all 0.5s linear;

            -o-transition: all 0.5s linear;

            -ms-transition: all 0.5s linear;

            transition: all 0.5s linear;

        }

        .view-tenth:hover img {

            -webkit-transform: scale(10);

            -moz-transform: scale(10);

            -o-transform: scale(10);

            -ms-transform: scale(10);

            transform: scale(10);

            -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

            filter: alpha(opacity=0);

            opacity: 0;

        }

        .view-tenth:hover .mask {

            -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

            filter: alpha(opacity=100);

            opacity: 1;

        }

        .view-tenth:hover h2,

        .view-tenth:hover p,

        .view-tenth:hover .link {

            -webkit-transform: scale(1);

            -moz-transform: scale(1);

            -o-transform: scale(1);

            -ms-transform: scale(1);

            transform: scale(1);

            -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

            filter: alpha(opacity=100);

            opacity: 1;

        }

    </style>

</head>

<body>

<div class="main">

    <div class="view view-tenth">

        <img src="http://tupian.enterdesk.com/2014/lxy/2014/04/11/2/5.jpg" />

        <div class="mask">

            <h2>Wonder Girls</h2>

            <p>Wonder Girls一向以青春活力的形象展现在观众面前，先后在韩国和美国乐坛都取得了不错的成绩...</p>

            <a href="#" class="link">查看全文</a>

        </div>

    </div>

    <div class="view view-tenth">

        <img src="http://tupian.enterdesk.com/2014/lxy/2014/04/11/2/3.jpg" />

        <div class="mask">

            <h2>Wonder Girls</h2>

            <p>Wonder Girls一向以青春活力的形象展现在观众面前，先后在韩国和美国乐坛都取得了不错的成绩...</p>

            <a href="#" class="link">查看全文</a>

        </div>

    </div>

    <div class="view view-tenth">

        <img src="http://tupian.enterdesk.com/2014/lxy/2014/04/11/2/10.jpg" />

        <div class="mask">

            <h2>Wonder Girls</h2>

            <p>Wonder Girls一向以青春活力的形象展现在观众面前，先后在韩国和美国乐坛都取得了不错的成绩...</p>

            <a href="#" class="link">查看全文</a>

        </div>

    </div>

    <div class="view view-tenth">

        <img src="http://tupian.enterdesk.com/2014/lxy/2014/04/11/2/11.jpg" />

        <div class="mask">

            <h2>Wonder Girls</h2>

            <p>Wonder Girls一向以青春活力的形象展现在观众面前，先后在韩国和美国乐坛都取得了不错的成绩...</p>

            <a href="#" class="link">查看全文</a>

        </div>

    </div>

</div>

</body>

</html>

来源：http://www.daqianduan.com/example?pid=6117

css3-鼠标经过产品列表图片放大显示文字（兼容IE9以上不含IE9）的更多相关文章

jQuery鼠标悬停图片放大显示
jQuery鼠标悬浮放于图片上之后图片放大显示的效果,即鼠标移到图片上图片突出显示,鼠标移开后恢复原来的模样,你可以在图片滚动效果中加上本特效,相信会更炫一些. <!DOCTYPE html P ...
HTML5鼠标hover的时候图片放大的效果展示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
jQuery点击图片放大显示原图效果
HTML部分:<div id="append_parent"></div> JS代码部分: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...
IE11部分图片无法显示的兼容办法
问题描述:写的网页在浏览器中测试兼容问题,FF,Chrome,Edge都完美兼容(包括Edge中的仿真),但是在IE11中却无法显示部分图片,并且报:DOM7009: 无法解码 URL 处的图像错误 ...
Android BaseAdapter Gallery 画廊视图（左右拖动图片列表拖至中间时图片放大显示）
画廊视图使用Gallery表示,能够按水平方向显示内容,并且可以手指直接拖动图片和移动,一般用来浏览图片,,被选中的选项位于中间,并且可以响应事件显示信息.在使用画廊视图时,首先在屏幕上添加Galle ...
img 鼠标滑上后图片放大,滑下后图片复原
<style type="text/css">img{ -webkit-transition: ease .2s; transition: ease .2s; -web ...
jquery鼠标滑过展示图片时显示详情
jquery: <script src="js/jquery.js" type="text/javascript"></script> ...
通过使用CSS字体阴影效果解决hover图片时显示文字看不清的问题
1.前言最近需要加入一个小功能,在鼠标越过图片时,提示其大小和分辨率,而不想用增加属性title来提醒,不够好看.然而发现如果文字是一种颜色,然后总有概率碰到那张图上浮一层的文字会看不到,所以加入文 ...
Python3 tkinter基础 Label compound 图片上显示文字 fg字体颜色 font字体大小
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...

随机推荐

android_serialport_api代码分析
1. 导入Android studio android_serialport_api是一个开源的串口测试工具,代码应该是用eclipse工程(不确定,没用过eclipse,反正不是Android st ...
[转]flash.net.Socket
本文转自:http://designstacks.net/actionscript-3-new-capabilities http://help.adobe.com/en_US/ActionScrip ...
poj 2417 Discrete Logging ---高次同余第一种类型。babystep_gaint_step
Discrete Logging Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 2831 Accepted: 1391 ...
HDU 2433 (最短路+BFS+剪枝)
http://acm.hdu.edu.cn/showproblem.php?pid=2433 这个问题因为路径都是1,所以可以用bfs遍历可以看这几篇文章讲解: http://blog.csdn.n ...
鸟哥linux私房菜学习笔记第二章知识点
2.1 linux一切皆文件 2.2 磁盘分区磁盘即文件 2.2.1 磁盘连接的方式与设备文件名的关系模糊 1.正常的实体机器大概使用的都是 /dev/sd[a-] 的磁盘文件名,至于虚拟机环境下 ...
csharp:FlowLayoutPanel
/// <summary> /// 集合添加的控件 /// 涂聚文20150339 /// </summary> public void AddNewTextBox() { P ...
【一些简单的jQuery选择器】
学习[js DOM 编程艺术],最后面有许多jQuery的选择器,每个都动手敲了一遍. jQuery 提供了高级选择器的方法. js获取元素的三个基本方法分别是通过标签名,类名和id,即(getEle ...
Swiper测试
在页面body中插入 <div class="swiper-container temp"> <div class="swiper-wrapper&qu ...
【html/css】若母div设置了透明度，如何才能使得里面的子div不继承母div的透明度
用rgba的方式给母div设置透明度的话就不会影响子div的透明度了. 例: background: rgba(51, 51, 51, 0.5);
No toolchains found in the NDK toolchains folder for ABI with prefix: arm-linux-androideabi
产生背景最近把Android Studio更新到3.0,更新之后出现了build错误:No toolchains found in the NDK toolchains folder for ABI ...

css3-鼠标经过产品列表 图片放大 显示文字 （兼容IE9以上 不含IE9）

css3-鼠标经过产品列表 图片放大 显示文字 （兼容IE9以上 不含IE9）的更多相关文章

随机推荐

热门专题

css3-鼠标经过产品列表图片放大显示文字（兼容IE9以上不含IE9）

css3-鼠标经过产品列表图片放大显示文字（兼容IE9以上不含IE9）的更多相关文章