CSS3实现鼠标经过图片时图片放大

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

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <link href="css/prodInfo.css" rel="stylesheet" type="text/css">
 5 </head>
 6 <style>
 7     div img{
 8         border:1px soild red;
 9         height: 218px;
10         width: 222px;
11         width:100%;
12         transition: all 0.6s;
13     }
14     img :hover{
15         transform: scale(1.2); /* 放大1.2倍 */
16     }
17 </style>
18 <body>
19     <div>
20         <img src="img/prodInfo/lf.jpg"/>
21     </div>
22 </body>
23 </html>

时间： 2024-08-06 16:06:43

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

CSS3感应鼠标背景闪烁和图片缩放效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS3感应鼠标的背景闪烁和图片缩放动态效果&l

鼠标经过图片时图片上出现文字，鼠标移出时隐藏（通俗版） -《狗嗨默示录》-

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

1.BitmapFactory.Options中的属性在进行图片压缩时,是通过设置BitmapFactory.Options的一些值来改变图片的属性的,以下我们来看看BitmapFactory.Options中经常使用的属性意思: options.inPreferredConfig - 设置Bitmap的偏好配置.值有Bitmap.Config.ARGB_8888,Bitmap.Config.ARGB_4444,Bitmap.Config.ARGB_8888.Bitmap.Config.RGB

iphone上传拍照图片时图片会旋转90度，从相册选择就不会，安卓手机也不会，怎么解决？

图片展示元素用 img 就可以自动修复不要用第三方的插件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>图片上传<

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

转载自:http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能. CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值. 效果如下图所示: 1.当未鼠标未放到图片上的效果: 2.当鼠标放到图片上后(放大的过程是有动画过渡的,这个过渡的时间可

HTML CSS 实现鼠标悬停时图片拉近效果

前言为了让网页的使用体验更好,我们会让网页的某些元素对鼠标的动作做出响应.例如鼠标滑过.单击按钮的时候按钮变色.变形.之前在很多网页上看到了鼠标滑过一个图片链接时图片放大.拉近的效果,今天尝试实现一下. 1. 使用background实现思路:设置以图片作为div元素的背景,鼠标滑过div的时候通过background属性放大图片. <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

鼠标经过图片时出现半透明文字特效

鼠标经过图片时出现半透明文字的效果以下是个很常见的图片显示特效,当鼠标经过图片时,图片上会浮动一个半透明的层,层内显示文字,同时图片的边框会变亮,效果很好. <html><head><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title>当鼠标经过图片时,出现半透明的文字</title><style type

DIV CSS鼠标经过悬停在图片上时图片上方显示文字（转）

DIV CSS鼠标悬停在没有文字内容图片上时图片上方显示文字,完全是纯css div实现.CSS实现鼠标悬停放图片上方时显示美化内容. 原始图片显示没有文字在上方,当鼠标经过悬停时显示文字并且文字背景为半透明.可以使用纯DIV+CSS实现鼠标悬停图片上显示文字内容. 纯div+css实现第一张图片没有文字内容,鼠标悬停时出现第二张图那样效果使用div css实现鼠标悬停图片上方时显示文字内容原理: 首先我们设置一个盒子对象,并且将图片使用style标签内设置为CSS背景图片,同时设置该对象ht

鼠标经过图片显示文字，鼠标移除时文字隐藏