纯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 三维变形实现立体方块特效源码
Dec 15 HTML / CSS
需要知道的CSS3动画技术
Jan 01 HTML / CSS
canvas像素画板的实现代码
Nov 21 HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
Dec 13 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
Jul 19 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
用HTML5制作数字时钟的教程
May 11 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
Apr 15 HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
Sep 09 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
Codeigniter的dom类用法实例
2015/06/26 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
PHP与Web页面的交互示例详解二
2020/08/04 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
Python中几种操作字符串的方法的介绍
2015/04/09 Python
python实现简单http服务器功能
2018/09/17 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
体育教育专业毕业生自荐信
2013/11/15 职场文书
商场端午节活动方案
2014/01/29 职场文书
财务会计毕业生个人求职信
2014/02/03 职场文书
2014年党务公开实施方案
2014/02/27 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS