今天我们要来分享一款很酷的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图片悬停放大特效的更多相关文章

  1. CSS3图片悬停放大动画

    在线演示 本地下载

  2. 基于jQuery悬停图片变色放大特效

    分享一款基于jQuery悬停图片变色放大特效是一款响应式鼠标悬停图片放大效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div style="width ...

  3. css3图片模糊过滤特效

    体验效果:点击这里查看效果 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  4. 精选 5 个漂亮的 CSS3 图片滑过特效

    这篇文章将为大家分享5款漂亮的CSS3图片滑过特效,比如滑过后显示图片的详细文字介绍,又比如滑过后对图片进行淡入淡出的效果等等.让我们一起来看看,喜欢的朋友赶紧收藏. 1.非常酷的CSS3图片说明效果 ...

  5. 基于HTML5/CSS3图片网格动画特效

    现在HTML5技术可以让网页上的图片变得非常神奇,各种各样的HTML5图片动画特效让你眼花缭乱.今天要分享的这款HTML5图片网格动画特效就非常炫酷.图片缩略图按网格的布局一行行排列,你只需点击按钮即 ...

  6. 基于CSS3图片可倾斜摆放的动画相册

    今天我们又要来分享一个CSS3动画相册.之前我们分享过一个很酷的放满女神的HTML5/CSS3相册,相册是全屏展示的.今天这款相册的特点是图片可以任意角度的倾斜摆放,就像随意放在桌面上一样.另外,当鼠 ...

  7. css3 图片 悬停效果

    纯css实现 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...

  8. 基于CSS3鼠标滑过放大突出效果

    还记得之前分享过一款CSS3图片悬停放大特效,效果非常不错.今天我们要再来分享一款类似的CSS鼠标滑过放大突出效果,只不过之前那个是图片,这次是色块,其实掌握了其CSS原理,任何网页元素都可以实现这种 ...

  9. 《基于JQuery和CSS的特效整理》系列分享专栏

    <基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201724.html 文章 一款基于jQue ...

随机推荐

  1. vsftp限制FTP用户只能访问自己的目录

    修改配置文件/etc/vsftpd/vsftpd.conf chroot_local_user=YESallow_writeable_chroot=YESchroot_list_enable=YESc ...

  2. 用JSON-server模拟REST API

    来源于: 用JSON-server模拟REST API(一) 安装运行 用JSON-server模拟REST API(二) 动态数据 用JSON-server模拟REST API(三) 进阶使用 在开 ...

  3. HDUOJ ----1709

    The Balance Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  4. supervisor+gunicorn部署python web项目

    有了Nginx,对于Tomcat没有必要详细了解. 有了supervisor,再也没有必要把一个程序设置成服务.驻留进程,supervisor真是一个相见恨晚的好工具. 在Tomcat中,所有的web ...

  5. JavaScript 设计模式之单例模式

    一.单例模式概念解读 1.单例模式概念文字解读 单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象.在Ja ...

  6. iOS - UIMenuController

    前言 NS_CLASS_AVAILABLE_IOS(3_0) __TVOS_PROHIBITED @interface UIMenuController : NSObject 1.UIMenuCont ...

  7. 搭建Go调试环境(LiteIDE)

                安装及配置LiteIDE 将 liteidex32.1.windows-qt5.zip解压到D:\即完成安装.   设置编辑环境 查看->编辑当前环境,确认GOROOT变 ...

  8. 转 Python标准库01 正则表达式 (re包)

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 我将从正则表达式开始讲Python的标准库.正则表达式是文字处理中常用的工具,而且 ...

  9. byte[] 转Hex String

    一.一个字符串转byte数组怎么转? byte[] byteArray = String.getBytes(); 二.又想把生成的数组转回字符串怎么办? String covertString = n ...

  10. struts2.xml中所有constant详解--大全

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-/ ...