基于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. C# 用timer做成服务后 timer_Tick () 为什么不执行？

    不能使用 窗体的 Timer,他只能在窗体中使用,服务中无法使用请使用 System.Timers.Timer类 protected override void OnStart(string[] ar ...

  2. Entity Framework 4.0 recipes 读书笔记2 ExecuteStoreQuery()

    写在之前:我想通过refector 反编译一下system.data.entity.dll(4.0 version),发现反编译出来的只有属性申明和方法声明,里面一句代码都没有,真是火大啊,试了几个. ...

  3. getOutputStream() 的问题

    小谢叫我看一下01服务器上的医药平台,说抛了很多异常出来,看一下,大部分都是因为登录的时候验证码那个JSP页面抛出的getOutputStream() has already been called ...

  4. 如何调试makefile变量

    六.七年前写过一篇<跟我一起写Makefile>,直到今天,还有一些朋友问我一些Makefile的问题,老实说,我有一段时间没有用Makefile了,生疏了.回顾,这几年来大家问题我的问题 ...

  5. SharePoint 2013 Farm 安装指南——Least Privilege

    写过很多关于SharePoint 2013 安装,这是第四篇.可能你会觉得为什么如此简单的安装至于花那么多精力去折腾吗.我的答案是肯定的.知识的积累不是一蹴而就的,而是循序渐进的去学习,每一个阶段都有 ...

  6. pyspark RandomForestRegressor 随机森林回归

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- """ Created on Fri Jun 8 09:27:08 2018 ...

  7. 【Android开发】构建Android源码编译环境

    原文:http://android.eoe.cn/topic/android_sdk 构建Android源码编译环境 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...

  8. 开发集成工具MyEclipse中Outline的问题

    序言 不懂的多查,越查就越显得自己的无知,越发现大神的存在,可能相对于我来说是大神,在他那个高度,就觉得自己很菜,这些都正常,最值得敬佩的是,比你厉害的人,还比你更努力,那自己还有什么理由不努力呢,如 ...

  9. IOS 设备备份文件详解 (二)

    这篇主要讲解如何解析Manifest.mbdb文件. 使用二进制工具打开这个文件,文件的头6个字节是固定的,相当于是文件的一种标识 后面的内容是一个一个的项,可以使用一个循环来读取文件,一个一个解析. ...

  10. PostgreSQL 保存json,jsonb类型

    PostgresQL 字符串隐式转换JSON脚本: -- 隐式将varchar转换为json CREATE OR REPLACE FUNCTION json_in_varchar(varchar) R ...