基于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. openstack nova 深入

    一.概述: 由nova --debug list查看到: #nova --debug list DEBUG (session:195) REQ: curl -g -i -X GET http://19 ...

  2. 【Oracle】Oracle约束的总结

    你对ORACLE约束的了解如何?比较模糊还是相当透彻?如果你对下面几个问题了如指掌的话,恭喜你,你已经对约束掌握得比较好了,不用看这篇文章了.ORACLE的约束有啥功能作用? 有哪些类型约束(不同版本 ...

  3. log4j（四）——如何控制不同风格的日志信息的输出？

    一:测试环境与log4j(一)——为什么要使用log4j?一样,这里不再重述 二:老规矩,先来个栗子,然后再聊聊感受 import org.apache.log4j.*; //by godtrue p ...

  4. 【Algorithm】希尔排序

    一. 算法描述 希尔排序:将无序数组分割为若干个子序列,子序列不是逐段分割的,而是相隔特定的增量的子序列,对各个子序列进行插入排序:然后再选择一个更小的增量,再将数组分割为多个子序列进行排序..... ...

  5. 【C语言】练习1-21

    题目来源:<The C programming language>中的习题 练习1-21:编写程序entab,将空格串替换为最好数量的制表符和空格,但要保持单词之间的间隔不变. 思路: 对 ...

  6. SQL中获取排序分组后数据的脚本

    废话不多说了,先上一段代码,如下所示: select distinct   b.OrgID,b.CompanyID,b.AreaID,b.CustChannelID,b.CustID,b.SaleTo ...

  7. OpenCV 学习笔记03 直线和圆检测

    检测边缘和轮廓不仅重要,还经常用到,它们也是构成其他复杂操作的基础. 直线和形状检测与边缘和轮廓检测有密切的关系. 霍夫hough 变换是直线和形状检测背后的理论基础.霍夫变化是基于极坐标和向量开展的 ...

  8. Inondb中的checkpoint

    checkpoint主要是为了解决一下问题: 1.缩短数据库的恢复时间 2.缓冲池不够用时,将脏页刷新到磁盘 3.重做日志不可用时,刷新脏页 Innodb引擎使用LSN(log sequence nu ...

  9. 如何控制android系统中NavigationBar 的显示与隐藏

    我们使用的大多数android手机上的Home键,返回键以及menu键都是实体触摸感应按键.如果你用Google的Nexus4或Nexus5话,你会发现它们并没有实体按键或触摸感应按键,取而代之的是在 ...

  10. SQL触发器 常用语句

    一.创建一个简单的触发器 CREATE TRIGGER 触发器名称 ON 表名 FOR INSERT.UPDATE 或 DELETE AS     T-SQL 语句 注意:触发器名称是不加引号的.   ...