基于9款CSS3鼠标悬停相册预览特效
基于9款CSS3鼠标悬停相册预览特效里面包含九款不同方式的相册展开特效代码。效果图如下：
实现的代码。
html代码：
<div class="albums">
<div class="albums-inner">
<div class="albums-tab">
<div class="albums-tab-thumb sim-anim-1">
<img src="data:images/studio_0001.jpg" class="all studio" />
<img src="data:images/studio_0002.jpg" class="all studio" />
<img src="data:images/studio_0003.jpg" class="all studio" />
<img src="data:images/studio_0004.jpg" class="all studio" />
<img src="data:images/studio_0005.jpg" class="all studio" />
<img src="data:images/studio_0006.jpg" class="all studio" />
<img src="data:images/studio_0001.jpg" class="all studio" />
</div>
<div class="albums-tab-text">.sim-anim-1 <span>(7 pictures)</span></div>
</div> <div class="albums-tab">
<div class="albums-tab-thumb sim-anim-2">
<img src="data:images/studio_0001.jpg" class="all studio" />
<img src="data:images/studio_0002.jpg" class="all studio" />
<img src="data:images/studio_0003.jpg" class="all studio" />
<img src="data:images/studio_0004.jpg" class="all studio" />
<img src="data:images/studio_0010.jpg" class="all studio" /> </div>
<div class="albums-tab-text">.sim-anim-2 <span>(5 pictures)</span></div>
</div> <div class="albums-tab">
<div class="albums-tab-thumb sim-anim-3">
<img src="data:images/studio_0001.jpg" class="all studio" />
<img src="data:images/studio_0002.jpg" class="all studio" />
<img src="data:images/studio_0003.jpg" class="all studio" />
<img src="data:images/studio_0004.jpg" class="all studio" />
<img src="data:images/studio_0005.jpg" class="all studio" />
<img src="data:images/studio_0006.jpg" class="all studio" />
<img src="data:images/studio_0007.jpg" class="all studio" />
<img src="data:images/studio_0008.jpg" class="all studio" />
<img src="data:images/studio_0011.jpg" class="all studio" /> </div>
<div class="albums-tab-text">.sim-anim-3 <span>(9 pictures)</span></div>
</div> <div class="albums-tab">
<div class="albums-tab-thumb sim-anim-4">
<img src="data:images/studio_0001.jpg" class="all studio" />
<img src="data:images/studio_0002.jpg" class="all studio" />
<img src="data:images/studio_0003.jpg" class="all studio" />
<img src="data:images/studio_0004.jpg" class="all studio" />
<img src="data:images/studio_0005.jpg" class="all studio" />
<img src="data:images/studio_0006.jpg" class="all studio" />
<img src="data:images/studio_0007.jpg" class="all studio" />
<img src="data:images/studio_0008.jpg" class="all studio" />
<img src="data:images/studio_0009.jpg" class="all studio" /> </div>
<div class="albums-tab-text">.sim-anim-4 <span>(9 pictures)</span></div>
</div> <div class="albums-tab">
<div class="albums-tab-thumb sim-anim-5">
<img src="data:images/studio_0001.jpg" class="all studio" />
<img src="data:images/studio_0002.jpg" class="all studio" />
<img src="data:images/studio_0003.jpg" class="all studio" />
<img src="data:images/studio_0004.jpg" class="all studio" />
<img src="data:images/studio_0005.jpg" class="all studio" /> </div>
<div class="albums-tab-text">.sim-anim-5 <span>(5 pictures)</span></div>
</div> <div class="albums-tab">
<div class="albums-tab-thumb sim-anim-6">
<img src="data:images/studio_0001.jpg" class="all studio" />
<img src="data:images/studio_0009.jpg" class="all studio" />
<img src="data:images/studio_0003.jpg" class="all studio" />
<img src="data:images/studio_0004.jpg" class="all studio" />
<img src="data:images/studio_0005.jpg" class="all studio" />
<img src="data:images/studio_0006.jpg" class="all studio" />
<img src="data:images/studio_0007.jpg" class="all studio" />
<img src="data:images/studio_0008.jpg" class="all studio" />
<img src="data:images/studio_0002.jpg" class="all studio" />
</div>
<div class="albums-tab-text">.sim-anim-6 <span>(9 pictures)</span></div>
</div> <div class="albums-tab">
<div class="albums-tab-thumb sim-anim-7">
<img src="data:images/studio_0001.jpg" class="all studio" />
<img src="data:images/studio_0002.jpg" class="all studio" />
<img src="data:images/studio_0003.jpg" class="all studio" />
<img src="data:images/studio_0004.jpg" class="all studio" /> </div>
<div class="albums-tab-text">.sim-anim-7 <span>(4 pictures)</span></div>
</div> <div class="albums-tab">
<div class="albums-tab-thumb sim-anim-8">
<img src="data:images/studio_0001.jpg" class="all studio" />
<img src="data:images/studio_0002.jpg" class="all studio" />
<img src="data:images/studio_0009.jpg" class="all studio" />
<img src="data:images/studio_0004.jpg" class="all studio" />
<img src="data:images/studio_0005.jpg" class="all studio" />
<img src="data:images/studio_0006.jpg" class="all studio" />
<img src="data:images/studio_0007.jpg" class="all studio" />
<img src="data:images/studio_0008.jpg" class="all studio" />
<img src="data:images/studio_0003.jpg" class="all studio" />
</div>
<div class="albums-tab-text">.sim-anim-8 <span>(9 pictures)</span></div>
</div> <div class="albums-tab">
<div class="albums-tab-thumb sim-anim-9">
<img src="data:images/studio_0001.jpg" class="all studio" />
<img src="data:images/studio_0002.jpg" class="all studio" />
<img src="data:images/studio_0003.jpg" class="all studio" />
<img src="data:images/studio_0004.jpg" class="all studio" />
<img src="data:images/studio_0005.jpg" class="all studio" />
<img src="data:images/studio_0009.jpg" class="all studio" />
<img src="data:images/studio_0007.jpg" class="all studio" />
<img src="data:images/studio_0008.jpg" class="all studio" />
<img src="data:images/studio_0006.jpg" class="all studio" />
</div>
<div class="albums-tab-text">.sim-anim-9 <span>(9 pictures)</span></div>
</div> </div> </div>
via：http://www.w2bc.com/Article/43855
基于9款CSS3鼠标悬停相册预览特效的更多相关文章
- 15款css3鼠标悬停图片动画过渡特效
分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- CSS3鼠标悬停8种动画特效
在线演示 本地下载
- HTML5+CSS3鼠标悬停图片特效
点击预览效果 下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...
- CSS3鼠标悬停图片上浮显示描述代码
效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...
- jQuery css3鼠标悬停图片显示遮罩层动画特效
jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
- 基于Three.js的360X180度全景图预览插件
基于Three.js的360X180度全景图预览插件 时间 2015-08-12 10:01:10 HTML5中国 原文 http://www.html5cn.org/article-8621-1 ...
- 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件
这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览 ...
- 基于jquery的相册预览gallery
众多有图片的产品,都要加个图片预览功能.然后市面上就出现了各种各样的相册,下面也提供一个基于jquery的相册. 源码:https://github.com/lilyH/gallery 版本: v0. ...
- css3鼠标悬停图片边框线条动画特效
css3鼠标经过内容区时,边框线条特效效果制作. html: <div class="strength grWidth hidden"> <div class ...
随机推荐
- 黑客公布2012年最弱智密码Top25(转)
尽管弱密码对安全性的危害大家都知道,但是仍然有很多网民使用超弱密码.日前,黑客公布了一份密码文档,列出了今年最弱智密码. 根据 SplashData 公布的“年度最弱智密码 Top25”,和去年一样, ...
- myeclipse 遇到的一些问题及解决方案
1..提示键配置 一般默认情况下,Eclipse ,MyEclipse 的代码提示功能是比Microsoft Visual Studio的差很多的,主要是Eclipse ,MyEclipse本身有很多 ...
- Linux 的僵尸(zombie)进程
可能很少有人意识到,在一个进程调用了exit之后,该进程 并非马上就消失掉,而是留下一个称为僵尸进程(Zombie)的数据结构.在Linux进程的5种状态中,僵尸进程是非常特殊的一种,它已经放弃了几乎 ...
- MySQL经常使用技巧
建表 每一个表都有一个id字段,最好为UNSIGNED.如 INT(9) UNSIGNED NOT NULL 在表使用一段时间后,使用PROCEDURE ANALYSE得到建议,如select * f ...
- Source Insight中代码块注释
转载:http://blog.csdn.net/cindylx422/article/details/7560786 修改工程目录下的utils.em文件,将下面代码添加到末尾,然后将此文件添加到工程 ...
- 转: 使用Hystrix实现自动降级与依赖隔离
使用Hystrix实现自动降级与依赖隔离 原创 2017年06月25日 17:28:01 标签: 异步 / 降级 869 这篇文章是记录了自己的一次集成Hystrix的经验,原本写在公司内部wiki里 ...
- 请通过vim练习：vim vimtutor
vim vimtutor ================================================================================ W e l ...
- django class-based view 考古
django 中的view中进化史: 1.在“天地初开”的时候django中的view是通过函数来定义的.函数接收一个request并以一个response作为返回: 对于这个request是通过po ...
- 关于 IOS code signe 和 Provisioning Files 机制 浅析
可以先读下这个译文. http://www.cnblogs.com/zilongshanren/archive/2011/08/30/2159086.html 读后,有以下疑惑. 在mac 机上生成的 ...
- 【转】在 Windows 10 下，配置 Kinect v2 可用于 Windows Hello 验证身份
先要修改下注册表HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\DriverFlighting\Partner如果没有这个文件夹就创建一个吧 然后创建一个字符串类型的变量T ...