因为最近做的项目刚好用到了这个实现,分享出来
 
class=enlarge 为div标签的class div img 为标签
.enlarge div img:hover{
transform: scale(3.2);
-webkit-transform: scale(3.0); /*Safari 和 Chrome*/
-moz-transform: scale(3.0); /*Firefox*/
-ms-transform: scale(3.0); /*IE9*/
-o-transform: scale(3.0); /*Opera*/
z-index:1;
border:2px solid black; (加黑色边框)
position: absolute;(谷歌浏览器只有加上这个,z-index才有效)
}

鼠标悬停,图片放大 CSS实现的更多相关文章

  1. jQuery鼠标悬停图片放大显示

    jQuery鼠标悬浮放于图片上之后图片放大显示的效果,即鼠标移到图片上图片突出显示,鼠标移开后恢复原来的模样,你可以在图片滚动效果中加上本特效,相信会更炫一些. <!DOCTYPE html P ...

  2. jquery图片放大插件鼠标悬停图片放大效果

    都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  3. 浅谈CSS和JQuery实现鼠标悬浮图片放大效果

    对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...

  4. CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法

    CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...

  5. 鼠标悬停,使用css切换图片

    鼠标悬停,使用css切换图片 当鼠标悬停在li上面切换另一张图片,只需添加下述css样式即可

  6. 常用css样式(文字超出部分用省略号显示、鼠标经过图片放大、出现阴影)

    文字超出部分用省略号显示: white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分不显示 */ text-overflow: ellipsis ...

  7. CSS3鼠标悬停图片上浮显示描述代码

    效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...

  8. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  9. HTML5+CSS3鼠标悬停图片特效

    点击预览效果            下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...

  10. 15款css3鼠标悬停图片动画过渡特效

    分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

随机推荐

  1. AJAX,PHP,前端简单交互制作输入框效果

    PHP数据 <?php // 数据 $arr = array( array("百度", "http://www.baidu.com/"), array(& ...

  2. 暑假练习赛 007 A - Time

    A - Time Description standard input/outputStatements A plane can go from city X to city Y in 1 hour ...

  3. Flex中宽度计算

    flex 有三个属性值,分别是 flex-grow, flex-shrink, flex-basis,默认值是 0 1 auto. 发现网上详细介绍他们的文章比较少, 今天就详细说说他们,先一个一个看 ...

  4. XMLHttpRequest2 异步 ajax

    XMLHttpRequest1只是对已经存在的xhr对象细节进行规范定义, XMLHttpRequest2升级了该对象.   FormData 类型可以用在xhr传输的时候,把表单序列化或者将数据以表 ...

  5. media query 单位

    使用em 判断的media query 在用户缩放的时候不会被破坏,使用em更加合适内容为王的页面趋势   内容的容器需要根据内容而按比例设置,就像line-height:1.14em,文字大小的1. ...

  6. Java多线程Lock

    JDK5以后为代码的同步提供了更加灵活的Lock+Condition模式,并且一个Lock可以绑定多个Condition对象 1.把原来的使用synchronized修饰或者封装的代码块用lock.l ...

  7. Python 解决面试题47 不用加减乘除做加法

    在看<剑指Offer>过程中,面试题47不用加减乘除做加法,给出的思路是使用二进制的异或以及与运算,总之就是使用二进制.但是在使用Python实现的过程中,对于正整数是没有问题的,但是对于 ...

  8. eclipse导出jar(含依赖)三步走

    之前用eclipse导出jar运行结果一直不尽人意,排查问题排查很久,最终确定到导出jar时,如果依赖jdk以外的jar时,就要通知eclipse 看了很多帖子,感觉操作起来都比较麻烦,注意点也比较多 ...

  9. 在C#程序中模拟发送键盘按键消息

    using System.Runtime.InteropServices; 引入键盘事件函数 [DllImport("user32.dll")]public static exte ...

  10. Java多线程学习之wait、notify/notifyAll 详解

    1.wait().notify/notifyAll() 方法是Object的本地final方法,无法被重写. 2.wait()使当前线程阻塞,前提是 必须先获得锁,一般配合synchronized 关 ...