<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/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;
}
</style>
</head>
<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>
<body>
</body>
</html>

css3hover效果的更多相关文章

  1. CSS3-Hover 效果 展示

    首先说说兼容性的问题吧,主要说说IE浏览器的兼容性.IE10+. 效果展示的css代码: .button { margin: .4em; padding: 1em; cursor: pointer; ...

  2. 关于Mongodb的全面总结

    MongoDB的内部构造<MongoDB The Definitive Guide> MongoDB的官方文档基本是how to do的介绍,而关于how it worked却少之又少,本 ...

  3. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

  4. Android UI体验之全屏沉浸式透明状态栏效果

    前言: Android 4.4之后谷歌提供了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏. 虚拟按键动态隐藏, 应用可以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 身临其境 的体 ...

  5. 哪种缓存效果高？开源一个简单的缓存组件j2cache

    背景 现在的web系统已经越来越多的应用缓存技术,而且缓存技术确实是能实足的增强系统性能的.我在项目中也开始接触一些缓存的需求. 开始简单的就用jvm(java托管内存)来做缓存,这样对于单个应用服务 ...

  6. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  7. CSS3 3D立方体效果－transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

  8. WPF做12306验证码点击效果

    一.效果 和12306是一样的,运行一张图上点击多个位置,横线以上和左边框还有有边框位置不允许点击,点击按钮输出坐标集合,也就是12306登陆的时候,需要向后台传递的参数. 二.实现思路 1.获取验证 ...

  9. app引导页(背景图片切换加各个页面动画效果)

    前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...

随机推荐

  1. 【WCF】服务并发中的“可重入模式”

    WCF服务实例的并发模式是在服务实现类上,使用 ServiceBehaviorAttribute 的 ConcurrencyMode 属性来指定.其值由 ConcurrencyMode 枚举来界定,这 ...

  2. js方法提纲

    Math.random() 日期时间函数(需要用变量调用):var b = new Date(); //获取当前时间b.getTime() //获取时间戳b.getFullYear() //获取年份b ...

  3. 关于 parseInt 的一道有意思的面试题

    看完标题,入坑过的同学脑海里很快会浮现出这道经典面试题,没碰到过的同学不妨跟着楼主先来复习一遍 parseInt 的用法(主要参考 MDN). parseInt 是 JavaScript 中的一个全局 ...

  4. laravel中的Database Notifications

    创建Post and  User模型 php artisan make:model Post php artisan make:model User 创建posts and  users 表文件 ph ...

  5. FaceNet---深度学习与人脸识别的二次结合

    今天我给大家带来一篇来自谷歌的文章,众所周知,谷歌是全世界最有情怀,最讲究技术的公司,比我们天朝的莆田广告商良心多了.还有就是前段时间的最强大脑,莆田广告商的那个小机器,也就忽悠忽悠行外人了,懂的人深 ...

  6. 2017-3-2 C#链接数据库实现登陆

    只是链接一个数据库就有好多的知识:) 实际操作下来,主要是两种登陆方式: 1.Windows的身份验证: 2.Sql Sever的身份验证: 两种的方法不同,但是主要是通过复制创建数据库的字符串来链接 ...

  7. Servlet的监听

    Servlet监听 在<Servlet和Jsp>中我们使用了ServletConfig获取Servlet的初始配置,用ServletContext来获取整个Web应用的初始配置,但如果需要 ...

  8. apicloud下拉刷新

    //下拉 apiready = function () { var param = {}; toDoRequest(); param.loadingImgae = 'widget://image/re ...

  9. Kubernetes 1.5安装

    Kubernetes从1.3开始引入kubeadm来试图简化其复杂的安装.但kubeadm至今仍不稳定,而且我个人觉得kubeadm反而麻烦,还不如直接用脚本或者其他自动化工具来安装来的利索.关于ku ...

  10. 导航栏转场动画CATransition

    CATransition动画来实现, 下面的代码是跳转到下一个视图: CATransition *animation = [CATransition animation]; [animation se ...