基于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 ...
随机推荐
- centos7编译python3.6与原有的2.7共存
在某些场景下我们可能需要python2.7和python3这两个版本进行共存,我在工作中也遇到过这样的问题,所以今天来总结下我的安装过程, 我的是用源码包安装的,安装的是python3.6的版本. 安 ...
- 关于LoadRunner的迭代
通过用lr做负载压力测试过程发现,如果设定不同的action迭代次数,每次得出的结果是不同的,曲线的表现形式也是不同的.这点就使我们会感觉困惑,为什么要设置action的迭代次数?以及对于不同的应用系 ...
- opencv在手机上实现照片背景虚化
概述 使用androidstudio开发,在手机上实现照片背景虚化 详细 代码下载:http://www.demodashi.com/demo/10599.html 一.准备工作 1.需要下载安装an ...
- 转:PHP关于反斜杠处理函数addslashes()和stripslashes()的用法
1.php处理\函数:addslashes()和stripslashes()函数 addslashes():对输入字符串中的某些预定义字符前添加反斜杠,这样处理是为了数据库查询语句等的需要.这些预定义 ...
- Linux下编辑利器vim,vimrc,viminfo的高级用法
1.ci" (由 change operator 和 text-object i" 组成) 这个命令会找到当前光标所在行的下一个 " 括起来的字符串,清除引号裏面的内容, ...
- aop:declare-parents注解
http://www.blogjava.net/jackfrued/archive/2010/02/27/314060.html <aop:aspect> <aop:declare- ...
- BIND9源码分析之acl 的实现
BIND配置中一大堆一大堆的acl,什么allow-query, allow-recursion, allow-update还有view的match-clients等等等等. acl中的主要存储的就是 ...
- cxf之org.xml.sax.SAXParseException; lineNumber: 7; columnNumber: 37; cvc-complex-type.2.4.c: 通配符的匹配很全面, 但无法找到元素 'jaxws:server' 的声明。
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- Python 死循环和嵌套循环
何为死循环:在编程中,一个无法靠自身的控制终止的循环被称为死循环. 死循环的使用:死循环并非一无是处,C语言中死循环while true或 while 1 是单片机编程的普遍用法,死循环一直运行等待中 ...
- iOS添加到购物车的简单动画效果
#pragma mark - 添加到购物车的动画效果 // huangyibiao - (void)addAnimatedWithFrame:(CGRect)frame { // 该部分动画 以sel ...