纯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图片翻转动画技术详解(IE也实现了)
Apr 03 HTML / CSS
使用CSS3来实现滚动视差效果的教程
Aug 24 HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 HTML / CSS
X/HTML5 和 XHTML2
Oct 17 HTML / CSS
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
Jan 30 HTML / CSS
html5绘制时钟动画
Dec 15 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
Oct 16 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
Jul 04 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
Dec 17 HTML / CSS
浅析HTML5 meta viewport参数
Oct 28 HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
Mar 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
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
静态页面的值传递(三部曲)
2006/09/25 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
延时加载JavaScript代码提高速度
2015/12/27 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
2019/06/04 jQuery
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
Python之自动获取公网IP的实例讲解
2017/10/01 Python
Python+OpenCV人脸检测原理及示例详解
2020/10/19 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
abstract是什么意思
2012/02/12 面试题
什么是makefile? 如何编写makefile?
2012/08/08 面试题
掌上明珠Java程序员面试总结
2016/02/23 面试题
财务部出纳岗位职责
2013/12/22 职场文书
高中军训感言500字
2014/02/24 职场文书
大学生心理活动总结
2014/07/04 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
三方协议书
2015/01/27 职场文书
技术支持岗位职责
2015/02/13 职场文书
小学家长意见怎么写
2015/06/03 职场文书
导游词之介休绵山
2019/12/31 职场文书
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
MySQL数据库 任意ip连接方法
2022/05/20 MySQL