纯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 实现圆形进度条的示例
Jul 05 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
CSS3 实现童年的纸飞机
May 05 HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
Oct 21 HTML / CSS
canvas实现图片马赛克的示例代码
Mar 26 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
Jan 14 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
使用canvas绘制超炫时钟
Dec 17 HTML / CSS
HTML5自定义属性的问题分析
Aug 16 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
Oct 08 HTML / CSS
html5表单的required属性使用
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 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
php实现的xml操作类
2016/01/15 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
prototype1.4中文手册
2006/09/22 Javascript
javascript真的不难-回顾一下基础知识
2013/01/15 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
vue使用Google地图的实现示例代码
2018/12/19 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
python3简单实现微信爬虫
2015/04/09 Python
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
Python3 合并二叉树的实现
2019/09/30 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
销售工作人员的自我评价分享
2013/11/10 职场文书
简历中自我评价范文3则
2013/12/14 职场文书
学校岗位设置方案
2014/01/16 职场文书
经典婚礼主持词
2014/03/13 职场文书
求职信怎么写
2014/05/23 职场文书
品质标语大全
2014/06/21 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL
Go语言空白表示符_的实例用法
2021/07/04 Golang
Python语言内置数据类型
2022/02/24 Python