基于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鼠标悬停相册预览特效的更多相关文章

  1. 15款css3鼠标悬停图片动画过渡特效

    分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  2. CSS3鼠标悬停8种动画特效

    在线演示 本地下载

  3. HTML5+CSS3鼠标悬停图片特效

    点击预览效果            下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...

  4. CSS3鼠标悬停图片上浮显示描述代码

    效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...

  5. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  6. 基于Three.js的360X180度全景图预览插件

    基于Three.js的360X180度全景图预览插件 时间 2015-08-12 10:01:10  HTML5中国 原文  http://www.html5cn.org/article-8621-1 ...

  7. 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件

    这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览   ...

  8. 基于jquery的相册预览gallery

    众多有图片的产品,都要加个图片预览功能.然后市面上就出现了各种各样的相册,下面也提供一个基于jquery的相册. 源码:https://github.com/lilyH/gallery 版本: v0. ...

  9. css3鼠标悬停图片边框线条动画特效

    css3鼠标经过内容区时,边框线条特效效果制作.   html: <div class="strength grWidth hidden"> <div class ...

随机推荐

  1. 使用Sense操作ElasticSearch CRUD

    安装完成之后,我们该开始学习关于ElasticSearch最基本的CURD操作了. ElasticSearch作为一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,其接口也 ...

  2. Git 配置(分布式版本控制系统)

    1.Mac Git 配置文件 既然已经在系统上安装了 Git,你会想要做几件事来定制你的 Git 环境.每台计算机上只需要配置一次,程序升级时会保留配置信息.你可以在任何时候再次通过运行命令来修改它们 ...

  3. Oracle 12C -- 设置CDB启动后,PDBs自动启动

    CDB重启后,PDBs默认是处于mounted状态 SQL> select name,open_mode from v$pdbs; NAME OPEN_MODE ---------------- ...

  4. PopUpWindow使用详解(二)——进阶及答疑

      相关文章:1.<PopUpWindow使用详解(一)——基本使用>2.<PopUpWindow使用详解(二)——进阶及答疑> 上篇为大家基本讲述了有关PopupWindow ...

  5. Springboot使用junit

    1. 首先要下载配套的spring-boot-starter-test包,注意版本要对应. compile("org.springframework.boot:spring-boot-sta ...

  6. 深度学习attention 机制了解

    Attention是一种用于提升基于RNN(LSTM或GRU)的Encoder + Decoder模型的效果的的机制(Mechanism),一般称为Attention Mechanism.Attent ...

  7. centOS7 安装man中文手册

    [root@localhost ~]# yum list | grep man.*zh -.el7 base [root@localhost ~]# yum -y install man-pages- ...

  8. 【转载】Spring @Async 源码解读。

    由于工作中经常需要使用到异步操作,一直在使用@Async, 今天抽空学习了一下它的执行原理,刚好看到一篇写的很棒的文章,这里转载过来做个记录,感谢原作者的无私奉献. 原文章链接地址:https://w ...

  9. mysql中的NULL的判断

      mysql> delete from `zhangchao` where x='NULL'; rows affected (0.00 sec) mysql> delete from ` ...

  10. MySQL的体系结构图

    http://attachbak.dataguru.cn/attachments/forum/201408/30/231337wrbs3xpr5kbs3ryh.png