基于CSS3图片悬停放大特效
今天我们要来分享一款很酷的CSS3图片特效,这款图片特效可以利用鼠标滑过图片使其悬停放大,并使图片的周围出现发光的效果。配合黑色的背景,这款CSS3图片悬停放大效果显得更加立体大气,非常适合产品图片的展示。

实现的代码。
html代码:
<div id="image-container">
<div class="img" id="img-1">
<div class="mask">
</div>
<img src="data:images/01.jpg">
</div>
<div class="img" id="img-2">
<div class="mask">
</div>
<img src="data:images/07.jpg">
</div>
<div class="img" id="img-3">
<div class="mask" id="mask-1">
</div>
<div class="mask" id="mask-2">
</div>
<img src="data:images/05.jpg">
</div>
<div class="img" id="img-4">
<div class="mask">
</div>
<img src="data:images/04.jpg">
</div>
<div class="img" id="img-5">
<div class="mask">
</div>
<img src="data:images/06.jpg">
</div>
<div class="img" id="img-6">
<div class="mask">
</div>
<img src="data:images/08.jpg">
</div>
<div class="clearfix">
</div>
</div>
<div class="clearfix">
</div>
<br>
<div id="warning" style="margin-top: 20px; text-align: center;">
</div>
via: http://www.w2bc.com/Article/29682
基于CSS3图片悬停放大特效的更多相关文章
- CSS3图片悬停放大动画
在线演示 本地下载
- 基于jQuery悬停图片变色放大特效
分享一款基于jQuery悬停图片变色放大特效是一款响应式鼠标悬停图片放大效果代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div style="width ...
- css3图片模糊过滤特效
体验效果:点击这里查看效果 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 精选 5 个漂亮的 CSS3 图片滑过特效
这篇文章将为大家分享5款漂亮的CSS3图片滑过特效,比如滑过后显示图片的详细文字介绍,又比如滑过后对图片进行淡入淡出的效果等等.让我们一起来看看,喜欢的朋友赶紧收藏. 1.非常酷的CSS3图片说明效果 ...
- 基于HTML5/CSS3图片网格动画特效
现在HTML5技术可以让网页上的图片变得非常神奇,各种各样的HTML5图片动画特效让你眼花缭乱.今天要分享的这款HTML5图片网格动画特效就非常炫酷.图片缩略图按网格的布局一行行排列,你只需点击按钮即 ...
- 基于CSS3图片可倾斜摆放的动画相册
今天我们又要来分享一个CSS3动画相册.之前我们分享过一个很酷的放满女神的HTML5/CSS3相册,相册是全屏展示的.今天这款相册的特点是图片可以任意角度的倾斜摆放,就像随意放在桌面上一样.另外,当鼠 ...
- css3 图片 悬停效果
纯css实现 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
- 基于CSS3鼠标滑过放大突出效果
还记得之前分享过一款CSS3图片悬停放大特效,效果非常不错.今天我们要再来分享一款类似的CSS鼠标滑过放大突出效果,只不过之前那个是图片,这次是色块,其实掌握了其CSS原理,任何网页元素都可以实现这种 ...
- 《基于JQuery和CSS的特效整理》系列分享专栏
<基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201724.html 文章 一款基于jQue ...
随机推荐
- Windows客户端的JProfiler远程监控Linux上的Tomcat
1.测试环境 服务器:RedHat Linux 3.4.3-9.EL4(内核版本 2.6.9-5.EL),Tomcat5.5.20,Sun JDK 1.5.0_09,JProfiler 4.3.2 f ...
- Start-Sleep 帮助信息
如下说明是翻译: help Start-Sleep 产生的帮助信息.译者: Edengundam(马涛) Start-Sleep 大纲使shell, 脚本, 或运行空间的活动挂起指定的时间. 语法St ...
- ORACLE 11G 利用泠备份恢复standby库
利用泠备份恢复standby数据库 開始使用泠备份进行db恢复 2.1,停止掉standby库 SQL> shutdown immediate; Database closed. Databas ...
- HDUOJ---三角形(组合数学)
http://acm.hdu.edu.cn/showproblem.php?pid=1249 三角形 Time Limit: 2000/1000 MS (Java/Others) Memory ...
- SVN解决创建文件时不带锁
解决创建文件时不带锁 C:\Documents and Settings\你的用户名\Application Data\Subversion 找到上面的用户路径 打开config添加 ### ...
- SSL原理
http://blog.csdn.net/terryzero/article/details/5921791SSL的原理以前一直很模糊,看了下面这篇文章后清楚了许多,为了方便以后的回顾,所以转载下 R ...
- 方法$.data()和$.('#test').on()的使用
1.on() 方法的使用 在选择元素上绑定一个或多个事件的事件处理函数. on()方法绑定事件处理程序到当前选定的jQuery对象中的元素.在jQuery 1.7中,.on()方法 提供绑定事件处理程 ...
- go 学习笔记(2) --变量、常量、iota、数组
参考网址:https://gobyexample.com 变量 Go中使用全新的关键字var来声明变量.var我们并不陌生,在Javascript 和C#中均有出现.不同的是Go和C#中变量属于强类型 ...
- C#--类成员
数据成员: 字段: 常量: 函数成员(执行代码): 方法: 属性 构造函数 析构函数 运算符 索引 事件 可以被声明为Static的类成员是:
- Html中meta标签详解--以前经常忽略的
W3School介绍:http://www.w3school.com.cn/html5/html5_meta.asp meta是用来在HTML文档中模拟HTTP协议的响应头报文. meta 标签的用处 ...