今天我们要来分享一款很酷的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. top(topas),vmstat,iostat在linux和AIX操作系统下显示情况

    top(topas),vmstat,iostat在linux和AIX操作系统下显示情况 分类: Linux基础 2013-08-09 17:26 1093人阅读 评论(0) 收藏 举报 详细列出各命令 ...

  2. Linux 添加硬盘设备

    fdisk命令用于管理磁盘分区,格式为:“fdisk [磁盘名称]”. 管理Linux系统中的硬盘设备最常用的方法就当属是用fdisk命令了,这条命令提供了添加.删除.转换分区等等功能于一身的“一站式 ...

  3. Android网络开发之WIFI

    WIFI全称Wireless Fidelity, 又称802.11b标准.WIFI联盟成立于1999年,当时的名称叫做Wireless Ethernet Compatibility Alliance( ...

  4. jquery serialize对json的包装用法

    jquery对象.serialize()  可以多用于表单对数据封装提交 能够收表参数,形成一个json格式字符串, 前提是:必须为每一个表单项取一个name属性 对元素 设置 name属性, 然后 ...

  5. struts2 中请求转发与请求重定向方法

    本文转自:http://blog.csdn.net/a327736051/article/details/50240491 一.Chain Result:这个result调用另外的一个action,连 ...

  6. HDUOJ ---悼念512汶川大地震遇难同胞——来生一起走

    悼念512汶川大地震遇难同胞——来生一起走 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  7. scanf/sscanf %[]格式控制串的用法(转)

    scanf/sscanf %[]格式控制串的用法 scanf中一种很少见但很有用的转换字符:[...]和[ ^...]. #include<stdio.h> int main() { ch ...

  8. html5中的FileReader对象

    表单中有图片选项,选中图片文件之后要求可以预览.这个功能很多控件都封装好了,但是它们的底层都是FileReader对象. FileReader对象提供了丰富的功能,包括以二进制.以文本方式读取文件内容 ...

  9. Lucene使用与优化(转)

    原文链接:http://blog.csdn.net/hongfu_/article/details/1933346 本文所使用的Lucene版本较低,年代久远,许多API可能已经变了. 1 lucen ...

  10. PHP 大数自动转换为科学计数法

    前段时间碰到一个很头疼的问题,就是大于12位的数字在PHP中,会自动转成科学计数法表 示. 比如 1234567891234 显示为 1.23456789123E+12 , 最后只能在计算出大数之后, ...