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

随机推荐

Android6.0.1 移植：显示系统（一）--测试framebuffer
#include <stdio.h> #include <unistd.h> #include <sys/types.h> #include <sys/sta ...
i.mx6 Android5.1.1 初始化流程之init.rc解析（未完成）
接上一篇:i.mx6 Android5.1.1 初始化流程之init进程参考资料:http://blog.csdn.net/mr_raptor/article/category/799879 这个博 ...
[转]WxEmojiView
本文转自:https://github.com/icindy/WxEmojiView 来源信息 author: Di (微信小程序开发工程师) organization: WeAppDev(微信小程序 ...
wpf 子窗体调用主窗体中函数的实现
子窗体(Win_Set): MainWindow m; m = (MainWindow)this.Owner; m.showText(&qu ...
ayer.prompt 怎样让输入值为空也可以向下执行
http://fly.layui.com/jie/4227/ layer.prompt({title: '输入任何口令,并确认',formType: 1, //prompt风格,支持0-2value: ...
Html-完整表格
表头th 特殊的单元格:加粗.居中它的用户是取代td的位置即可 <table border="2"> <tr> <th>姓名</th&g ...
MySQL---4、语句规范
1.命名规范 (1)库名.表名.(按现在的规范类似; PromoHayaoRecord),数据库名使用小写,字段名必须使用小写字母,并采用下划线分割.关键字与函数名称全部大写.(2)库名.表名.字段名 ...
java中equal和==的比较
equals 方法是 java.lang.Object 类的方法. 有两种用法说明: (1)对于字符串变量来说,使用“==”和“equals()”方法比较字符串时,其比较方法不同. “==”比较两个变 ...
Odata简介和Demo
转:http://www.cnblogs.com/shanyou/archive/2013/06/11/3131583.html 在SOA的世界中,最重要的一个概念就是契约(contract).在云计 ...
Hadoop学习笔记(9) ——源码初窥
Hadoop学习笔记(9) ——源码初窥之前我们把Hadoop算是入了门,下载的源码,写了HelloWorld,简要分析了其编程要点,然后也编了个较复杂的示例.接下来其实就有两条路可走了,一条是继续 ...

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

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

随机推荐

热门专题

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

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