基于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. Javascript将html转成pdf,下载（html2canvas 和 jsPDF）

    最近碰到个需求,需要把当前页面生成pdf,并下载.弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :) 项目源码地址:https://github.com/linwalker/render-h ...

  2. 【Oracle】Oracle中复合数据类型

    1,常见的操作数据库的技术有那些 jdbc     使用java 访问数据库的技术    PLSQL  (procedure  过程化sql) 在数据库内部操作数据的技术    proc/c++    ...

  3. API设计原则

    译序 Qt的设计水准在业界很有口碑,一致.易于掌握和强大的API是Qt最著名的优点之一.此文既是Qt官网上的API设计指导准则,也是Qt在API设计上的实践总结.虽然Qt用的是C++,但其中设计原则和 ...

  4. python packages prebuild for windows

    python  prebuild / precompiled packages for windows  by uci edu   在python windows环境下作业,有时候会碰上一些无厘头的问 ...

  5. 移动硬盘做pe启动盘

  6. MySQL复制表结构、表数据

    1.复制表结构及数据到新表 CREATE TABLE 新表SELECT * FROM 旧表 这种方法会将oldtable中所有的内容都拷贝过来,当然我们可以用delete from newtable; ...

  7. Redis复制与可扩展集群搭建【转】

    本文会讨论一下Redis的复制功能以及Redis复制机制本身的优缺点以及集群搭建问题. Redis复制流程概述 Redis的复制功能是完全建立在之前我们讨论过的基于内存快照的持久化策略基础上的,也就是 ...

  8. ubuntu 安装python mysqldb

    sudo apt-get install python-mysqldb #!/usr/bin/python #-*-coding:utf-8-*- ''' This file include all ...

  9. SQLMap 学习

    注入完整流程:http://mp.weixin.qq.com/s/G_DUUVuPH9DeWagjELCPfA sqlmap命令:http://www.cnblogs.com/handt/p/855f ...

  10. PHP将CMYK颜色值和RGB颜色相互转换的例子

    PHP将CMYK颜色值和RGB颜色相互转换的例子 function hex2rgb($hex) { $color = str_replace('#','',$hex); $rgb = array('r ...