基于9款CSS3鼠标悬停相册预览特效
基于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鼠标悬停相册预览特效的更多相关文章
- 15款css3鼠标悬停图片动画过渡特效
分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- CSS3鼠标悬停8种动画特效
在线演示 本地下载
- HTML5+CSS3鼠标悬停图片特效
点击预览效果 下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...
- CSS3鼠标悬停图片上浮显示描述代码
效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...
- jQuery css3鼠标悬停图片显示遮罩层动画特效
jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
- 基于Three.js的360X180度全景图预览插件
基于Three.js的360X180度全景图预览插件 时间 2015-08-12 10:01:10 HTML5中国 原文 http://www.html5cn.org/article-8621-1 ...
- 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件
这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览 ...
- 基于jquery的相册预览gallery
众多有图片的产品,都要加个图片预览功能.然后市面上就出现了各种各样的相册,下面也提供一个基于jquery的相册. 源码:https://github.com/lilyH/gallery 版本: v0. ...
- css3鼠标悬停图片边框线条动画特效
css3鼠标经过内容区时,边框线条特效效果制作. html: <div class="strength grWidth hidden"> <div class ...
随机推荐
- java 发送post请求参数中含有+会转化为空格的问题
如题 原因分析:参数在传递过程中经历的几次编码和解码标准不同,导致加号.空格等字符的错误. 解决方案:将post请求的参数中 ,含有+号的,统统采用%2B 去替换,这是URL的协议问题.
- c# 中内部类的简单介绍 C#内部类
最近在看java一方面的书籍,看到一个很奇怪的问题,java类中还可以再定义一个类,这种结构非常特殊!后来才发现我知识浅薄了,原来C#中也有内部类,之前都一直没有注意过这个语法结构! 使用内部类有这样 ...
- svn搭建本地服务端
使用VisualSVN Server来完成,下载地址:https://www.visualsvn.com/server/download/ 我安装的版本是3.3.1,安装的时候选择了标准版本,另外一个 ...
- TF 设置GPU模式训练
https://blog.csdn.net/confuciust/article/details/78982264 在终端执行程序时指定GPU CUDA_VISIBLE_DEVICES=1 pytho ...
- uefi+GPT分区安装ubuntu[zz]
现状:1.预装win8的笔记本几乎都是uefi启动模式,配合GPT磁盘分区,于是遇到了“麻烦”不会装了,或者说按照老教程安装,结果失败了.而且有很多人在问怎么解决,其实网上就有嘛,关键词就是“uefi ...
- PHP断点调试工具Xdebug的安装
Xdebug是一个PHP程序调试器,可以用来跟踪,调试和分析PHP程序的运行状况.其实调试PHP还有其他工具比如Zend Debugger,但zend官方不是免费发布的,后来更新为zend Serve ...
- windows下php的各个版本下载地址
windows下php的各个版本 https://windows.php.net/downloads/releases/archives/
- JS 工具函数 方法(其中js的crc32和php的crc32区别)
var util = {}; util.indexOf = function (array, item) { for (var i = 0; i < array.length; i++) { i ...
- 【Android开发】之Android环境搭建及HelloWorld
原文链接:http://android.eoe.cn/topic/android_sdk Android开发之旅:环境搭建及HelloWorld Android开发之旅:环境搭建及HelloWorld ...
- 快学Scala习题解答—第四章 映射和元组
4 映射和元组 4.1 设置一个映射,当中包括你想要的一些装备,以及它们的价格.然后构建还有一个映射.採用同一组键,可是价格上打9折 映射的简单操作 ,"gun"->18 ...