今天我们要来分享一款很酷的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. 在JQuery中获取URL中的参数值

    添加一个js文件,代码如下 // * jQuery url get parameters function [获取URL的GET参数值] // *character_set UTF-8 // * au ...

  2. 微信小程序项目实战之天气预报

    概述 微信小程序项目实战之天气预报 详细 代码下载:http://www.demodashi.com/demo/10634.html 一.准备工作 1.注册微信小程序 2.注册和风天气账号 3.注册百 ...

  3. Android网络开发之HttpClient

    Apache提供HttpClient,它对java.net中的类做了封装和抽象,更适合在Android上开发应用. HttpClient应用开发几个类: 1. ClientConnectionMana ...

  4. web服务器一些概念

    一.Web服务器 Web服务基于HTTP协议,HTTP协议基于TCP/IP协议. HTTP请求底层必然是套接字,也就是TCP协议,HTTP服务器就是监听端口的一个守护进程. 它负责HTTP连接的建立. ...

  5. SPFA 上手题 数 枚:

    1, HDU 1548 A strange lift :http://acm.hdu.edu.cn/showproblem.php?pid=1548 这道题可以灰常巧妙的转换为一道最短路题目,对第i层 ...

  6. 快速掌握activity的生命周期

    activity的生命周期不管是在面试还是在工作中我们都会经常遇到,这当然也是非常基础的,基础也很重要哦,学会activity的生命周期对我们以后开发更健壮的程序会有很大帮助.下面来看一下Activi ...

  7. DBA_实践指南系列4_Oracle Erp R12系统备份和恢复Backup(案例)

    2013-12-04 Created By BaoXinjian

  8. 通过mysqltools全自动安装配置mysql复制环境

    一.从github下载mysqltools工具包 github地址:https://github.com/Neeky/mysqltools 二.环境规划: 主机名 ip mysql中的角色 maste ...

  9. javascript array操作

    首先来看一下怎么判断一个对象是不是数组: 1.Array.isArray(obj) 调用数组的isArray方法 2.obj instanceof Array 判断对象是否是Array的实例 3.Ob ...

  10. angularJS双向绑定和依赖反转

    一.双向绑定: UI<-->数据 数据->UI (数据改变UI跟着变) UI->数据 (UI改变数据跟着变) 数据改变->UI改变原理: 监听数据是否改变,如果改变更新U ...