1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <title>实例: css3技巧——产品列表之鼠标滑过效果</title>
  6.     <style>
  7.         .main *{
  8.             padding:0;
  9.             margin:0;
  10.             font-family:'Source Code Pro', Menlo, Consolas, Monaco, monospace;
  11.             box-sizing: content-box;
  12.             -webkit-box-sizing: content-box;
  13.  
  14.         }
  15.         .main {
  16.             position: relative;
  17.             width: 680px;
  18.             margin: 0 auto;
  19.         }
  20.         .view {
  21.             width: 300px;
  22.             margin: 10px;
  23.             float: left;
  24.             border: 10px solid #fff;
  25.             overflow: hidden;
  26.             position: relative;
  27.             text-align: center;
  28.             -webkit-box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6;
  29.             -moz-box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6;
  30.             box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6;
  31.             cursor: default;
  32.         }
  33.         .view .mask{
  34.             width: 300px;
  35.             height: 200px;
  36.             position: absolute;
  37.             overflow: hidden;
  38.             top: 0;
  39.             left: 0;
  40.         }
  41.         .view img {
  42.             display: block;
  43.             position: relative;
  44.             max-width:100%;
  45.         }
  46.         .view h2 {
  47.             text-transform: uppercase;
  48.             color: #fff;
  49.             text-align: center;
  50.             position: relative;
  51.             font-size: 17px;
  52.             padding: 10px;
  53.             background: rgba(0, 0, 0, 0.8);
  54.             margin: 20px 0 0 0;
  55.         }
  56.         .view p {
  57.             font-size: 12px;
  58.             position: relative;
  59.             color: #fff;
  60.             padding: 10px 20px 20px;
  61.             text-align: left;
  62.         }
  63.         .view .link {
  64.             display: inline-block;
  65.             text-decoration: none;
  66.             padding: 7px 14px;
  67.             background: #000;
  68.             color: #fff;
  69.             text-transform: uppercase;
  70.             -webkit-box-shadow: 0 0 1px #000;
  71.             -moz-box-shadow: 0 0 1px #000;
  72.             box-shadow: 0 0 1px #000;
  73.             font-size: 14px;
  74.         }
  75.         .view .link:hover {
  76.             -webkit-box-shadow: 0 0 5px #000;
  77.             -moz-box-shadow: 0 0 5px #000;
  78.             box-shadow: 0 0 5px #000;
  79.         }
  80.  
  81.         .view-tenth img {
  82.             -webkit-transform: scaleY(1);
  83.             -moz-transform: scaleY(1);
  84.             -o-transform: scaleY(1);
  85.             -ms-transform: scaleY(1);
  86.             transform: scaleY(1);
  87.             -webkit-transition: all 0.7s ease-in-out;
  88.             -moz-transition: all 0.7s ease-in-out;
  89.             -o-transition: all 0.7s ease-in-out;
  90.             -ms-transition: all 0.7s ease-in-out;
  91.             transition: all 0.7s ease-in-out;
  92.         }
  93.         .view-tenth .mask {
  94.             background-color: rgba(249, 179, 255, 0.3);
  95.             -webkit-transition: all 0.5s linear;
  96.             -moz-transition: all 0.5s linear;
  97.             -o-transition: all 0.5s linear;
  98.             -ms-transition: all 0.5s linear;
  99.             transition: all 0.5s linear;
  100.             -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  101.             filter: alpha(opacity=0);
  102.             opacity: 0;
  103.         }
  104.         .view-tenth h2 {
  105.             border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  106.             background: transparent;
  107.             margin: 20px 40px 0px 40px;
  108.             -webkit-transform: scale(0);
  109.             -moz-transform: scale(0);
  110.             -o-transform: scale(0);
  111.             -ms-transform: scale(0);
  112.             transform: scale(0);
  113.             color: #333;
  114.             -webkit-transition: all 0.5s linear;
  115.             -moz-transition: all 0.5s linear;
  116.             -o-transition: all 0.5s linear;
  117.             -ms-transition: all 0.5s linear;
  118.             transition: all 0.5s linear;
  119.             -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  120.             filter: alpha(opacity=0);
  121.             opacity: 0;
  122.         }
  123.         .view-tenth p {
  124.             color: #333;
  125.             -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  126.             filter: alpha(opacity=0);
  127.             opacity: 0;
  128.             -webkit-transform: scale(0);
  129.             -moz-transform: scale(0);
  130.             -o-transform: scale(0);
  131.             -ms-transform: scale(0);
  132.             transform: scale(0);
  133.             -webkit-transition: all 0.5s linear;
  134.             -moz-transition: all 0.5s linear;
  135.             -o-transition: all 0.5s linear;
  136.             -ms-transition: all 0.5s linear;
  137.             transition: all 0.5s linear;
  138.         }
  139.         .view-tenth .link {
  140.             -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  141.             filter: alpha(opacity=0);
  142.             opacity: 0;
  143.             -webkit-transform: scale(0);
  144.             -moz-transform: scale(0);
  145.             -o-transform: scale(0);
  146.             -ms-transform: scale(0);
  147.             transform: scale(0);
  148.             -webkit-transition: all 0.5s linear;
  149.             -moz-transition: all 0.5s linear;
  150.             -o-transition: all 0.5s linear;
  151.             -ms-transition: all 0.5s linear;
  152.             transition: all 0.5s linear;
  153.         }
  154.         .view-tenth:hover img {
  155.             -webkit-transform: scale(10);
  156.             -moz-transform: scale(10);
  157.             -o-transform: scale(10);
  158.             -ms-transform: scale(10);
  159.             transform: scale(10);
  160.             -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  161.             filter: alpha(opacity=0);
  162.             opacity: 0;
  163.         }
  164.         .view-tenth:hover .mask {
  165.             -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  166.             filter: alpha(opacity=100);
  167.             opacity: 1;
  168.         }
  169.         .view-tenth:hover h2,
  170.         .view-tenth:hover p,
  171.         .view-tenth:hover .link {
  172.             -webkit-transform: scale(1);
  173.             -moz-transform: scale(1);
  174.             -o-transform: scale(1);
  175.             -ms-transform: scale(1);
  176.             transform: scale(1);
  177.             -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  178.             filter: alpha(opacity=100);
  179.             opacity: 1;
  180.         }
  181.     </style>
  182. </head>
  183. <body>
  184. <div class="main">
  185.     <div class="view view-tenth">
  186.         <img src="http://tupian.enterdesk.com/2014/lxy/2014/04/11/2/5.jpg" />
  187.         <div class="mask">
  188.             <h2>Wonder Girls</h2>
  189.             <p>Wonder Girls一向以青春活力的形象展现在观众面前，先后在韩国和美国乐坛都取得了不错的成绩...</p>
  190.             <a href="#" class="link">查看全文</a>
  191.         </div>
  192.     </div>
  193.     <div class="view view-tenth">
  194.         <img src="http://tupian.enterdesk.com/2014/lxy/2014/04/11/2/3.jpg" />
  195.         <div class="mask">
  196.             <h2>Wonder Girls</h2>
  197.             <p>Wonder Girls一向以青春活力的形象展现在观众面前，先后在韩国和美国乐坛都取得了不错的成绩...</p>
  198.             <a href="#" class="link">查看全文</a>
  199.         </div>
  200.     </div>
  201.     <div class="view view-tenth">
  202.         <img src="http://tupian.enterdesk.com/2014/lxy/2014/04/11/2/10.jpg" />
  203.         <div class="mask">
  204.             <h2>Wonder Girls</h2>
  205.             <p>Wonder Girls一向以青春活力的形象展现在观众面前，先后在韩国和美国乐坛都取得了不错的成绩...</p>
  206.             <a href="#" class="link">查看全文</a>
  207.         </div>
  208.     </div>
  209.     <div class="view view-tenth">
  210.         <img src="http://tupian.enterdesk.com/2014/lxy/2014/04/11/2/11.jpg" />
  211.         <div class="mask">
  212.             <h2>Wonder Girls</h2>
  213.             <p>Wonder Girls一向以青春活力的形象展现在观众面前，先后在韩国和美国乐坛都取得了不错的成绩...</p>
  214.             <a href="#" class="link">查看全文</a>
  215.         </div>
  216.     </div>
  217. </div>
  218. </body>
  219. </html>

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

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

  1. jQuery鼠标悬停图片放大显示

    jQuery鼠标悬浮放于图片上之后图片放大显示的效果,即鼠标移到图片上图片突出显示,鼠标移开后恢复原来的模样,你可以在图片滚动效果中加上本特效,相信会更炫一些. <!DOCTYPE html P ...

  2. HTML5鼠标hover的时候图片放大的效果展示

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. jQuery点击图片放大显示原图效果

    HTML部分:<div id="append_parent"></div> JS代码部分: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  4. IE11部分图片无法显示的兼容办法

    问题描述:写的网页在浏览器中测试兼容问题,FF,Chrome,Edge都完美兼容(包括Edge中的仿真),但是在IE11中却无法显示部分图片,并且报:DOM7009: 无法解码 URL 处的图像 错误 ...

  5. Android BaseAdapter Gallery 画廊视图 （左右拖动图片列表拖至中间时图片放大显示）

    画廊视图使用Gallery表示,能够按水平方向显示内容,并且可以手指直接拖动图片和移动,一般用来浏览图片,,被选中的选项位于中间,并且可以响应事件显示信息.在使用画廊视图时,首先在屏幕上添加Galle ...

  6. img 鼠标滑上后图片放大,滑下后图片复原

    <style type="text/css">img{ -webkit-transition: ease .2s; transition: ease .2s; -web ...

  7. jquery鼠标滑过展示图片时显示详情

    jquery: <script src="js/jquery.js" type="text/javascript"></script> ...

  8. 通过使用CSS字体阴影效果解决hover图片时显示文字看不清的问题

    1.前言 最近需要加入一个小功能,在鼠标越过图片时,提示其大小和分辨率,而不想用增加属性title来提醒,不够好看.然而发现如果文字是一种颜色,然后总有概率碰到那张图上浮一层的文字会看不到,所以加入文 ...

  9. Python3 tkinter基础 Label compound 图片上显示文字 fg字体颜色 font字体大小

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

随机推荐

  1. CSS小技巧(一)

    左右布局 将内部的子元素加浮动,父元素清除浮动即可. 代码: <!DOCTYPE html> <html> <head> <title>test< ...

  2. Angular2-除了自定义标签，你还可以这样配置组件的选择器

    开发应用时,UCD给到我们的样式经常使用子类选择器“>”,如果所有组件都用自定义的标签选择器,开发人员无疑要对很多样式做调整. Angular2组件化除了自定义标签,还可以在selector元数 ...

  3. java 基础 --- java8 HashMap

    问题 : HashMap 容量大小 (capacity)为什么为 2n HashMap 是线程安全的吗,为什么 HashMap 既然有hash进行排位还需要equals()作用是什么   文章部分图片 ...

  4. 十一、spark SQL的scala示例

    简介 spark SQL官网:http://spark.apache.org/docs/latest/sql-programming-guide.html sparkSQL是构建在sparkCore之 ...

  5. groovy运算符

    import java.util.regex.Matcher /** * Created by Jxy on 2018/12/20 10:29 * groovy运算符 */ /*class opera ...

  6. 使用admin lte 碰到访问Google字体的问题

    下载了admin lte 的模板,运行的时候,发现很慢,看了一下console,发现adminlte.css里有import google的字体文件,众所周知的原因,无法访问,所以网页很慢,没办法,只 ...

  7. async await的使用

    var sleep = function (time) { return new Promise(function (resolve, reject) { setTimeout(function () ...

  8. java 简单计算器

    package com.direct.demo; import java.text.DecimalFormat; import java.util.Scanner; public class Calc ...

  9. Struts2详讲

    一 概述 1.什么是Struts2? Struts2是一个在WebWork框架基础上发展起来开源MVC框架. 2.StrutsPrepareAndExecuteFilter StrutsPrepare ...

  10. drupal7 为视图添加 过滤标准 内容类型

    1.单击 FILTER CRITERIA 右边的“添加”按钮 2.在弹出的对话框中输入“类型”,单击搜索结果中的“内容:类型” 3.确定之后,选择需要的内容类型即可,例如添加“书评”内容类型的过滤 4 ...