基于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 ...
随机推荐
- 使用Sense操作ElasticSearch CRUD
安装完成之后,我们该开始学习关于ElasticSearch最基本的CURD操作了. ElasticSearch作为一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,其接口也 ...
- Git 配置（分布式版本控制系统）
1.Mac Git 配置文件 既然已经在系统上安装了 Git,你会想要做几件事来定制你的 Git 环境.每台计算机上只需要配置一次,程序升级时会保留配置信息.你可以在任何时候再次通过运行命令来修改它们 ...
- Oracle 12C -- 设置CDB启动后，PDBs自动启动
CDB重启后,PDBs默认是处于mounted状态 SQL> select name,open_mode from v$pdbs; NAME OPEN_MODE ---------------- ...
- PopUpWindow使用详解(二)——进阶及答疑
相关文章:1.<PopUpWindow使用详解(一)——基本使用>2.<PopUpWindow使用详解(二)——进阶及答疑> 上篇为大家基本讲述了有关PopupWindow ...
- Springboot使用junit
1. 首先要下载配套的spring-boot-starter-test包,注意版本要对应. compile("org.springframework.boot:spring-boot-sta ...
- 深度学习attention 机制了解
Attention是一种用于提升基于RNN(LSTM或GRU)的Encoder + Decoder模型的效果的的机制(Mechanism),一般称为Attention Mechanism.Attent ...
- centOS7 安装man中文手册
[root@localhost ~]# yum list | grep man.*zh -.el7 base [root@localhost ~]# yum -y install man-pages- ...
- 【转载】Spring @Async 源码解读。
由于工作中经常需要使用到异步操作,一直在使用@Async, 今天抽空学习了一下它的执行原理,刚好看到一篇写的很棒的文章,这里转载过来做个记录,感谢原作者的无私奉献. 原文章链接地址:https://w ...
- mysql中的NULL的判断
mysql> delete from `zhangchao` where x='NULL'; rows affected (0.00 sec) mysql> delete from ` ...
- MySQL的体系结构图
http://attachbak.dataguru.cn/attachments/forum/201408/30/231337wrbs3xpr5kbs3ryh.png