纯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 相关文章推荐
用CSS3来实现社交分享按钮
Nov 11 HTML / CSS
一款利用纯css3实现的超炫3D表单的实例教程
Dec 01 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
May 08 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
Aug 01 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 HTML / CSS
Canvas绘制浮动球效果的示例
Dec 29 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 HTML / CSS
详解CSS不受控制的position fixed
May 25 HTML / CSS
html+css实现环绕倒影加载特效
Jul 07 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的memory_limit限制的方法分享
2012/02/21 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
浅谈PHP中的
2016/04/23 PHP
php的常量和变量实例详解
2017/06/27 PHP
thinkphp分页集成实例
2017/07/24 PHP
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
JavaScript实现公历转农历功能示例
2017/02/13 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
javascript数组定义的几种方法
2017/10/06 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
python中的错误处理
2016/04/10 Python
python实现读取并显示图片的两种方法
2017/01/13 Python
Python序列循环移位的3种方法推荐
2018/04/09 Python
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
2019/06/21 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
英国门把手公司:Door Handle Company
2019/05/12 全球购物
Ajxa常见问题都有哪些
2014/03/26 面试题
建龙钢铁面试总结
2014/04/15 面试题
电子信息专业学生自荐信
2013/11/09 职场文书
经理秘书找工作求职信
2013/12/19 职场文书
给老师的一封建议书
2014/03/13 职场文书
共青团员自我评价范文
2014/09/14 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书