基于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. magento登陆

    magento判断用户登录 Magento 登陆之后返回登录之前的页面 magento 在登陆后一般会自动跳转到 My Account 页面 但是经常会有需求 就是登陆自动跳转到 之前的页面里面 工具 ...

  2. 使用iTextSharp修改PDF文件（一）

    这个iTextSharp确实是个好东西,可以创建.读取PDF格式的文档,虽然我的需求比较简单,但我首先还是基本上.完整地看完了它的相关文档,不喜欢英文的同志,可以搜索一篇<用C#制作PDF文件全 ...

  3. 【Android】Android如何实现手机震动

    实现手机震动其实很简单,手机震动使用是Vibrator类,然后震动也是需要权限的,在使用之前在AndroidManifest.xml文件中添加 <uses-permission android: ...

  4. class-dump在osx 10.11以后安装方法

      当Mac升级了OSX 10.11后,配置class-dump的时候,会发现逆向书上推荐的class-dump存放目录/usr/bin,class-dump存放不进去,尝试过用sudo 还是不被允许 ...

  5. OpenCV 学习笔记03 凸包convexHull、道格拉斯-普克算法Douglas-Peucker algorithm、approxPloyDP 函数

    凸形状内部的任意两点的连线都应该在形状里面. 1 道格拉斯-普克算法 Douglas-Peucker algorithm 这个算法在其他文章中讲述的非常详细,此处就详细撰述. 下图是引用维基百科的.ε ...

  6. root目录空间不够的问题

    今天导入mysql表的时候,提示write file error /tmp/xxx 原因是表太大,创建临时表的时候,tmp目录不够空间了. 找到一个解决方法: 使用 mount --bind moun ...

  7. Linux批量kill进程

    使用awk批量杀进程的命令: ps -ef | grep firefox | grep -v grep | awk '{print "kill -9 "$2}'|sh 说明: #列 ...

  8. WPF：“wpf类库项目改为Window应用程序项目”系列问题

    一.wpf类库项目改为Window应用程序项目1.错误 CS5001 Program does not contain a static 'Main' method suitable for an e ...

  9. MySQL表名不区分大小写的设置方法

    原来Linux下的MySQL默认是区分表名大小写的,通过如下设置,可以让MySQL不区分表名大小写:1.用root登录,修改 /etc/my.cnf:2.在[mysqld]节点下,加入一行: lowe ...

  10. Git清除不被任何分支所有的commit

    在一个分支上开发,有一些commit没有merge进master,后来放弃这个分支,不想继续开发了,那么这些没merge的commit就丢失了,称为dangling. 想要清除这些commit,运行: ...