今天我们要来分享一款很酷的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. MySQL存储过程中的3种循环【转载】

    在MySQL存储过程的语句中有三个标准的循环方式:WHILE循环,LOOP循环以及REPEAT循环.还有一种非标准的循环方式:GOTO,不过这种循环方式最好别用,很容易引起程序的混乱,在这里就不错具体 ...

  2. Linux链接文件ln

    链接命令:ln 生成链接文件   ln [源文件] [目标目录] : 创建硬链接 -s:创建软链接    硬链接特征:(ln )1.拥有相同的i节点和存储block快,可以看做是同一个文件2.可通过i ...

  3. SpringBoot之自定义验证码

    代码地址如下:http://www.demodashi.com/demo/14280.html 项目介绍 Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控 ...

  4. 140730暑期培训.txt

    1.大数加减法    思路分析:        1.将数据当做字符串输入(gets(s))        2.将字符型转换为整型,逆着存            char? int      i=0,j ...

  5. PHP反射获取当前函数的内容

    <?php $test = function () { echo 'hello world'; }; function closure_dump($closure) { try { $func ...

  6. cxf之Exception in thread "main" java.lang.NoSuchMethodError: org.apache.cxf.jaxrs.provider.ProviderFactory.<init>(Lorg/apache/cxf/Bus;)V

    pom.xml中关于cxf的配置jar包冲突??? 1.http://blog.csdn.net/yzl_8877/article/details/53216923 2.https://www.cnb ...

  7. ubuntu 安装php-redis

    sudo apt-get install redis-server 测试redis是否安装成功:注意:要开启redisredis-cliset test helloOKget test"ba ...

  8. 在Windows Service上安装运行Redis

    CSDN下载RedisWatcher,运行InstallWatcher.msi,默认安装在C:\Program Files (x86)\RedisWatcher,修改watcher.conf # re ...

  9. 【php】基础学习4

    这部分主要包括php面向对象的程序设计,具体如下: <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http ...

  10. C#异常小知识

    C#中异常捕获相信大家都很熟悉,经常使用的异常捕获有: 1. try{.....} catch (Exception ex) {throw ex;} 2. try{.....} catch (Exce ...