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

 <!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. yii视频地址哦

    https://www.yiichina.com/video  

  2. 算法(8)Maximum Product Subarray

    题目:在一个数组中找到一个子数组,让子数组的乘积最大,比如[2,3,-2,4]返回6 思路:之前自己想到的思路是对于一个int类型的数组,只要负数的个数是偶数,那么乘积肯定是全局乘就可以了,然后对于负 ...

  3. password & Encryption

    password & Encryption cipher https://dev.tencent.com/login

  4. ARC075 F.Mirrored

    题目大意:给定D,询问有多少个数,它的翻转减去它本身等于D 题解做法很无脑,利用的是2^(L/2)的dfs,妥妥超时 于是找到了一种神奇的做法. #include <iostream> u ...

  5. 【转】IBatis.Net项目数据库SqlServer迁移至Oracle

    转自:http://www.2cto.com/database/201312/265514.html 最近完成了一个(IBatis.Net+MVC)项目的数据库+代码迁移工作,可把我折腾得~~~ IB ...

  6. [UOJ #52]【UR #4】元旦激光炮

    题目大意:交互题,给你三个有序数组,长度分别为$n\_a,n\_b,n\_c$,都不超过$10^5$.三个函数$get\_a(i),get\_b(i),get\_c(i)$,分别返回$a_i,b_i, ...

  7. redux-saga基本用法

    redux-saga是管理redux异步操作的中间件,redux-saga通过创建sagas将所有异步操作逻辑收集在一个地方集中处理. sagas采用Generator函数来yield Effects ...

  8. 【BZOJ】2453: 维护队列【BZOJ】2120: 数颜色 二分+分块（暴力能A）

    先说正解:把所有相同的数相成一个链在每一个区间里的种数就是不同链的链头,那么记录每个数的上个相同数所在位置,那么只要找出l到r之间前驱值在l之前的数的个数就可以了 本人打的暴力,有一个小技巧,用cha ...

  9. wyh的物品~（二分）

    链接:https://www.nowcoder.com/acm/contest/93/I来源:牛客网 题目描述 wyh学长现在手里有n个物品,这n个物品的重量和价值都告诉你,然后现在让你从中选取k个, ...

  10. ubunut14.04 mentohust配置

      1.设置网卡eth0的IP地址和子网掩码 sudo ifconfig eth0 10.162.32.94 netmask 255.0.0.0 将IP地址改为:10.162.32.94,子网掩码改为 ...