css3技巧——产品列表之鼠标滑过效果(一)
查看效果:
http://www.daqianduan.com/example?pid=6117
html代码:
<div class="main">
<div class="view view-tenth">
<img src="http://t-1.tuzhan.com/705648b6987e/c-2/l/2014/04/12/14/6bb27bdd03e3441283b0030e22789abe.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://t-1.tuzhan.com/4457fe87956f/c-2/l/2014/04/12/14/9d3f9f225b1c425c8f0a97cee7d69362.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://t-1.tuzhan.com/2a28cd7057c6/c-2/l/2014/04/12/14/11d939ad45674593bc35ef264953a23e.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://t-1.tuzhan.com/830df96b6396/c-2/l/2014/04/12/14/7beb26fcb025486a8388ae1449f8d6a8.jpg" />
<div class="mask">
<h2>Wonder Girls</h2>
<p>Wonder Girls一向以青春活力的形象展现在观众面前,先后在韩国和美国乐坛都取得了不错的成绩...</p>
<a href="#" class="link">查看全文</a>
</div>
</div>
</div>
css代码:
.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;
}
css3技巧——产品列表之鼠标滑过效果(一)的更多相关文章
- css3技巧——产品列表之鼠标滑过效果translateY(三)
<div class="main"> <div class="view view-tenth"> <figure> < ...
- css3—产品列表之鼠标滑过效果
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title&g ...
- 9种CSS3 blend模式制作的鼠标滑过图片标题特效
这是一款使用CSS3 background-blend-mode制作的鼠标滑过图片标题特效.该图片标题特效在鼠标滑过一张图片的时候,图片的标题会对应的动画,而且图片会使用css blend模式渲染为很 ...
- Css3 常见鼠标滑过效果集合
1.演示地址: http://yaochuxia.github.io/hover/#
- css3-鼠标经过产品列表 图片放大 显示文字 (兼容IE9以上 不含IE9)
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title&g ...
- jQuery实现鼠标滑过图片列表加遮罩层
这个例子实现的功能是:有一列图片列表,鼠标滑过时,将有遮罩层的另一张图盖在该图片的上方,实现鼠标hover的效果. 一.HTML代码: <div class="home-content ...
- 简单的CSS3鼠标滑过图片标题和遮罩层动画特效
此文转自:http://www.cnblogs.com/w2bc/p/5735300.html,仅供本人学习参考,版权归原作者所有! 这是一款使用CSS3制作的简单的鼠标滑过图片标题和遮罩层动画特 ...
- CSS3鼠标滑过图标放大以及旋转
本人是HTML5-CSS3初学者,这次分享一款纯CSS3实现的图片动画,当鼠标滑过小图标时,图标会放大,同时图标会出现旋转的动画效果.我们在很多个性化个人博客中经常看到鼠标滑过人物头像后头像图片旋转就 ...
- CSS3鼠标滑过动画线条边框特效
基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/ ...
随机推荐
- a标签替代input的submit提交功能
在工作中有时候会遇到A标签,但是提交表单的时候我们需要用到submit来提交表单,下面几行代码很好的解决了这个问题! <div class="btn"><a hr ...
- 20150313--AJAX
from,提交信息,抛弃当前页面,并刷新页面. AJAX,从当前页面获取信息,并提交.反馈信息,不会抛弃页面. 例: 用户注册时,验证用户名是否已存在, 创建两个标准控件:TextBox1,Label ...
- python基础:搜索路径
如何将写好的脚本或者是模块加入python的搜索路径? >>>import sys >>> sys.path ['', '/Library/Frameworks/P ...
- 【转载】#303 - Accessibility of Class Members
Members of a class can have different kinds of accessibility. An accessibility keyword indicates wha ...
- android ListView_显示数据库数据
xml <?xml version="1.0"?> -<LinearLayout tools:context=".MainActivity" ...
- C++ Maps 映射
C++ Maps是一种关联式容器,包含“关键字/值”对 begin() 返回指向map头部的迭代器 clear() 删除所有元素 count() 返回指定元素出现的次数 empty() 如果map为空 ...
- HIV T2
甲学者将HIV病毒的遗传物质彻底水解后得到A.B.C三种化合物,乙学者将组成T2噬菌体的遗传物质彻底水解后得到了A.B.D三种化合物.你认为C.D两种化合物分别指的是 A.尿嘧啶.胸腺嘧啶 B.胸腺嘧 ...
- 1 。 LightOJ 1234 打表法(数据太大,把数据缩小100倍)
原题链接http://acm.hust.edu.cn/vjudge/contest/121397#problem/A Description In mathematics, the nth harmo ...
- 博客转移到 海胖网 http://haipz.com/ 希望你能支持我们!
博客转移到 海胖网 http://haipz.com/ 希望你能支持我们! 博客转移到 海胖网 http://haipz.com/ 希望你能支持我们! 博客转移到 海胖网 http://haipz.c ...
- PCB参数计算神器-Saturn PCB Design Toolkit下载及安装指南
进行PCB设计,特别是高频高速设计时,难免会涉及到PCB相关参数的计算及设置,如:VIA的过流能力,VIA的寄生电容.阻抗等,导线的载流能力,两相互耦合信号线间的串扰,波长等参数. 这里向大家介绍一款 ...