纯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使用技巧5个
Apr 02 HTML / CSS
纯CSS3发光分享按钮的实现教程
Sep 06 HTML / CSS
CSS+jQuery实现的在线答题功能
Apr 25 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
Dec 06 HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
Aug 14 HTML / CSS
HTML5 创建canvas元素示例代码
Jun 04 HTML / CSS
canvas离屏技术与放大镜实现代码示例
Aug 31 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
canvas实现图片镜像翻转的2种方式
Jul 22 HTML / CSS
前端使用svg图片改色实现示例
Jul 23 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版本实现代码
2012/09/15 PHP
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
js date 格式化
2017/02/15 Javascript
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
Vue中自定义全局组件的实现方法
2017/12/08 Javascript
vue底部加载更多的实例代码
2018/06/29 Javascript
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
解决ele ui 表格表头太长问题的实现
2019/11/13 Javascript
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
Python单元测试框架unittest简明使用实例
2015/04/13 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
Python 3.6打包成EXE可执行程序的实现
2019/10/18 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
HTML5标签大全
2016/11/23 HTML / CSS
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
让世界充满爱演讲稿
2014/05/24 职场文书
教导主任个人总结
2015/03/03 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书