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 ...

随机推荐

guava快速入门（三）
Guava工程包含了若干被Google的 Java项目广泛依赖的核心库,例如:集合 [collections] .缓存 [caching] .原生类型支持 [primitives support] ...
阿里巴巴Java开发规约插件使用
10月14日上午9:00 阿里巴巴于在杭州云栖大会<研发效能峰会>上,正式发布<阿里巴巴Java开发手册>扫描插件,该插件在扫描代码后,将不符合<手册>的代码按Bl ...
Java包装类、拆箱和装箱详解
转载:https://www.cnblogs.com/ok932343846/p/6749488.html 虽然 Java 语言是典型的面向对象编程语言,但其中的八种基本数据类型并不支持面向对象编程, ...
Core.Java.Volume.I.Fundamentals.10th.Edition 14.5.8 Volatile域中文版章节勘误
今天重扫了corejava 14 并发的一章,在谈到volatile域代替synchronized 应用于并发更新时,看到如下内容,并发更新可用内部锁的方式但会带来阻塞问题,可用volatile域替代 ...
centos 安装cloud foundry CLI
步骤: 1.wget -O /etc/yum.repos.d/cloudfoundry-cli.repo https://packages.cloudfoundry.org/fedora/cloudf ...
MVC 导出Execl 的总结几种方式（二）
接着上面的来,继续导出Execl 的功能使用FileResult 方式直接可以生产Execl ,这样我们将会写大量处理后台的代码,个人感觉不好,只是展示出来,提供参考第一步:编辑控制器 publi ...
RESTORE DATABASE命令还原SQLServer 2005 数据库
--返回由备份集内包含的数据库和日志文件列表组成的结果集. --主要获得逻辑文件名 USE master RESTORE FILELISTONLY FROM DISK = 'g:\back.Bak' ...
TAT
瞎扯继\(HNOI,\)学科\(,CTSC, APIO\)连续爆炸之后曾一度的怀疑人生,没有任何搞学习的欲望不断的反省自己:我为什么这么菜? 然后回去搞学科,一直处于一个颓废的状态后来得知\( ...
php备注
一.关于OOP 1.PHP目前不支持方法重载
Selenium对浏览器的支持
1.火狐浏览器优点:FireFox Dirver对页面的自动化测试支持得比较好,很直观地模拟页面的操作,对JavaScript的支持也非常完善,基本上页面上做的所有操作FireFox Driver都 ...

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

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

随机推荐

热门专题

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

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