纯css3实现鼠标经过图片显示描述的动画效果


Posted in HTML / CSS onSeptember 01, 2014

今天给大家带来的是用css3技术实现鼠标经过图片,显示图片描述的动画效果。鼠标经过图片时,图片动画缩小并渐变显示描述。我们一起看看效果图:

纯css3实现鼠标经过图片显示描述的动画效果 

源码下载

我们一起学习下此案例的代码。

html代码:

复制代码
代码如下:

<div align="center">
<div class="carre_couleur base_hov" style="background-color: #f8b334;">
<a target="_blank" href="http://www.w2bc.com">
<div class="retract" style="background-color: #f8b334;">
<img src="img/1.png"></div>
<div class="acced">
<div class="big_acced" style="color: #f39c12;">
BEST HOME</div>
<div class="middle_acced">
This home is the best</div>
</div>
</a>
</div>
<div class="carre_couleur base_hov" style="background-color: #2ecc71;">
<a target="_blank" href="http://www.w2bc.com">
<div class="retract" style="background-color: #2ecc71;">
<img src="img/2.png"></div>
<div class="acced">
<div class="big_acced" style="color: #27ae60;">
BEST PIC</div>
<div class="middle_acced">
This pic is the best</div>
</div>
</a>
</div>
<div class="carre_couleur base_hov" style="background-color: #e74c3c;">
<a target="_blank" href="http://www.w2bc.com">
<div class="retract" style="background-color: #e74c3c;">
<img src="img/3.png"></div>
<div class="acced">
<div class="big_acced" style="color: #c0392b;">
BEST PC</div>
<div class="middle_acced">
This computer is the best</div>
</div>
</a>
</div>

css3代码:

复制代码
代码如下:

.carre_couleur
{
width: 200px;
height: 200px;
display: inline-block;
position: relative;
margin-top: 0px;
}
.base_hov .retract
{
-webkit-transition: all 200ms ease-in;
-webkit-transform-origin: 50% 20%;
-webkit-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform-origin: 50% 20%;
-moz-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform-origin: 50% 20%;
-ms-transform: scale(1);
transition: all 200ms ease-in;
transform-origin: 50% 20%;
transform: scale(1);
width: 200px;
height: 200px;
position: absolute;
z-index: 2;
left: 0;
}
.base_hov:hover .retract
{
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(0.6);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(0.6);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(0.6);
transition: all 200ms ease-in;
transform: scale(0.6);
}
.acced
{
width: 180px;
padding: 10px;
bottom: 0;
position: absolute;
z-index: 1;
text-align: left;
}
.big_acced
{
color: #ffffff;
font-size: 25px;
font-weight: 400;
}
.middle_acced
{
color: #ffffff;
font-size: 15px;
font-weight: 400;
}

复制上面的代码到你的html试试效果吧。
HTML / CSS 相关文章推荐
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
Apr 03 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
Sep 02 HTML / CSS
input元素的url类型和email类型简介
Jul 11 HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
使用phonegap查找联系人的实现方法
Mar 31 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
Dec 28 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 HTML / CSS
css3实现的加载动画效果
Apr 07 HTML / CSS
css背景和边框标签实例详解
May 21 HTML / CSS
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 #HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 #HTML / CSS
CSS3实例分享--超炫checkbox复选框和radio单选框
Sep 01 #HTML / CSS
CSS实现限制字数功能当对象内文本溢出时显示省略标记
Aug 20 #HTML / CSS
CSS3的transition和animation的用法实例介绍
Aug 20 #HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 #HTML / CSS
css3中新增的样式使用示例附效果图
Aug 19 #HTML / CSS
You might like
ASP知识讲座四
2006/10/09 PHP
浅析PHP递归函数返回值使用方法
2013/02/18 PHP
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
php猜单词游戏
2015/09/29 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
Google韩国首页图标动画效果
2007/08/26 Javascript
javascript:以前写的xmlhttp池,代码
2008/05/18 Javascript
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
vue观察模式浅析
2018/09/25 Javascript
js实现每日签到功能
2018/11/29 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
Opencv求取连通区域重心实例
2020/06/04 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
2015年教务工作总结
2015/05/23 职场文书
2016年班主任新年寄语
2015/08/18 职场文书
基于Python实现一个春节倒计时脚本
2022/01/22 Python
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js