在鼠标经过图片时，图片被放大，而且还有个过渡的效果....

 <!DOCTYPE html>

 <html>

 <head>

     <link href="css/prodInfo.css" rel="stylesheet" type="text/css">

 </head>

 <style>

     div img{

         border:1px soild red;

         height: 218px;

         width: 222px;

         width:100%;

         transition: all 0.6s;

     }

     img :hover{

         transform: scale(1.2); /* 放大1.2倍 */

     }

 </style>

 <body>

     <div>

         <img src="img/prodInfo/lf.jpg"/>

     </div>

 </body>

 </html>

CSS3实现鼠标经过图片时图片放大的更多相关文章

  1. Lodop背景图无图片时显示放大叉号问题

    正常情况下,如果指定图片路径中,图片不存在或指定错误的路径,会因为找不到图片显示叉号,Lodop背景图如果设置了背景图宽度高度控制,显示的叉号也会被相应的放大,形成放大的模糊的图案,看起来就像是黑色边 ...

  2. wpf RenderTargetBitmap保存控件为图片时图片尺寸不对的问题

    使用RenderTargetBitmap渲染图片时,必须在需要渲染的控件外层包含一个border控件,不然渲染的图片返回就会出现问题. 如下: <Grid> <Grid.RowDef ...

  3. Android中处理大图片时图片压缩

    1.BitmapFactory.Options中的属性 在进行图片压缩时,是通过设置BitmapFactory.Options的一些值来改变图片的属性的,下面我们来看看BitmapFactory.Op ...

  4. com.nostra13.universalimageloader 加载displayImage图片时图片模糊的处理办法

    配置显示参数: DisplayImageOptions options = new DisplayImageOptions.Builder() .showImageOnLoading(defaultR ...

  5. css3实现 鼠标经过li时动态画边框(jq库导航)

    <!doctype html> <html> <head> <meta charset="utf-8" /> <meta na ...

  6. CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）

    转载自:http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能. ...

  7. CSS实现鼠标移入时图片的放大效果以及缓慢过渡

    transform:scale()可以实现按比例放大或者缩小功能. transition可以设置动画执行的时间,实现缓慢或者快速的执行动画,效果图如下: 源码: <!DOCTYPE html&g ...

  8. 使用JavaScript 中的Math对象和勾股定理公式，计算鼠标的位置与页面图片中心点的距离，根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大，距离近时图片缩小

    查看本章节 查看作业目录 需求说明: 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理.距离远时图片放大,距离近 ...

  9. CSS3实现鼠标移动到图片上图片变大

    CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义 <!DOCTYPE html><html> <head&g ...

随机推荐

  1. 【历史】- Unix时代的开创者Ken Thompson

    自图灵奖诞生以来,其获得者一直都是计算机领域的科学家与学者,而在所有这些界的图灵奖中只有唯一的一届有个例外,那就是Ken Thompson与Dennis M. Ritchie,他们都是计算机软件工程师 ...

  2. x86/x64的stack*****************************TBD

    1.push parameter, %rdi,%rsi,%rdx,%rcx,%r8,%r9 用作函数参数,依次对应第1参数,第2参数... 2. push return address 3. push ...

  3. Java IO 流 体系结构图

  4. oracle视图就是封装了一条写好的sql语句 可通过视图修改表结构 ； oracle需要手动创建序列

    create sequence student_sid; --创建序列 oracle只能通过手动方式创建序列

  5. BZOJ4373 算术天才⑨与等差数列（线段树）

    看上去很难维护,考虑找一些必要条件.首先显然最大值-最小值=k*(r-l).然后区间内的数需要模k同余.最后区间内的数两两不同(k=0除外).冷静一下可以发现这些条件组合起来就是充分的了. 考虑怎么维 ...

  6. 【学习笔记】Learning OpenCV3——Ch8 working with video

    Reading Video with the cv::VideoCapture Object 对象创建的三种方法: // 1. Input filename cv::VideoCapture::Vid ...

  7. 某ISP的流氓行径 劫持用户HTTP请求插入js代码

    最近公司搞的项目有用户反应点击任意链接后偶尔会跳到一个“莫名奇妙”的网站………… 喏,就是这个咯.

  8. scrapy新版本特性

    1:在spider中返回一个自定义的字典,老版本中需要先定义一个Item,填充后再返回一个对象 新版本中可以直接返回一个字典 2:Per-spider settings  为每个spider进行单独设 ...

  9. JS alert()、confirm()、prompt()的区别

    这三个都是属于弹框类型的 使用警告.提示和确认消息框来获得用户的输入.这些消息框是 window 对象的接口方法.由于 window 对象位于对象层次的顶层,因此实际应用中不必使用这些消息框的全名(例 ...

  10. 【洛谷 P3842】[TJOI2007]线段（DP）

    裸DP.感觉楼下的好复杂,我来补充一个易懂的题解. f[i][0]表示走完第i行且停在第i行的左端点最少用的步数 f[i][1]同理,停在右端点的最少步数. 那么转移就很简单了,走完当前行且停到左端点 ...