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

 <!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. 算法(7)Majority Element II

    题目:找出数组中出现次数大于n/3次的数字 思路:摩尔投票法.所有的帖子中都说:先遍历一遍数组找到备选元素,然后再遍历一遍数组考察下这个元素是否是真的超过n/3,然后就直接上代码,但是现在的问题是:我 ...

  2. Configuring Dojo with dojoConfig - The Dojo Toolkit

    转载自Dojo官网 Configuring Dojo with dojoConfig The dojoConfig object (formerly djConfig) allows you to s ...

  3. BZOJ4424/CF19E Fairy（dfs树+树上差分）

    即删除一条边使图中不存在奇环.如果本身就是个二分图当然任意一条边都可以,先check一下.否则肯定要删除在所有奇环的交上的边. 考虑怎么找这些边.跑一遍dfs造出dfs树,找出返祖边构成的奇环.可以通 ...

  4. powershell入门教程-v0.3版

    powershell入门教程-v0.3版 来源 https://www.itsvse.com/thread-3650-1-1.html 参考 http://www.cnblogs.com/piapia ...

  5. 导致SQL执行慢的原因

    索引对大数据的查询速度的提升是非常大的,Explain可以帮你分析SQL语句是否用到相关索引. 索引类似大学图书馆建书目索引,可以提高数据检索的效率,降低数据库的IO成本.MySQL在300万条记录左 ...

  6. [Leetcode] Recover binary search tree 恢复二叉搜索树

    Two elements of a binary search tree (BST) are swapped by mistake. Recover the tree without changing ...

  7. 【BZOJ 2822】[AHOI2012]树屋阶梯 卡特兰数+高精

    这道题随便弄几个数就发现是卡特兰数然而为什么是呢? 我们发现我们在增加一列时,如果这一个东西(那一列)他就一格,那么就是上一次的方案数,并没有任何改变,他占满了也是,然后他要是占两格呢,就是把原来的切 ...

  8. nodejs npm insttall 带不带-g这个参数的区别

    -g 中的g是global的意思所以带-g这个参数是全局安装,不带-g这个参数是本地安装. 在windows系统中全局安装的目录在:C:\Users\linsenq\AppData\Roaming\n ...

  9. Java实现十进制数转十六进制数

    Now~Let's begin our second question~ 如何利用Java语言将十进制数字转换成十六进制数字呢? 我第一次编码出来的效果是酱紫的~ /** * */ package c ...

  10. CentOS 6.4安装配置ldap

    CentOS 6.5安装配置ldap 时间:2015-07-14 00:54来源:blog.51cto.com 作者:"ly36843运维" 博客 举报 点击:274次 一.安装l ...