鼠标移动到图片上图片逐渐变大、变清晰（带有过渡效果）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标移动到图片上图片逐渐变大、变清晰（带有过渡效果）</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
margin: 50px auto;
overflow: hidden;
filter:alpha(Opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}
div img{
cursor: pointer;
transition: all 0.6s;
-moz-transition: all 0.6s; /* 0.6s完成过渡效果 */
-webkit-transition: all 0.6s;
}
div img:hover{
transform: scale(1.2); /* 放大1.2倍 */
}
div:hover{
filter:alpha(Opacity=100);
-moz-opacity:1;
opacity: 1;
}
</style>
</head>
<body>
<div>
<img title="鼠标移上来，我变清晰了，逐渐变大了" src="http://new-img2.ol-img.com/375x375/115/638/liZVVgjbgJHDs.jpg" />
</div>
</body>
</html

时间： 2024-09-28 22:45:56

鼠标移动到图片上图片逐渐变大、变清晰（带有过渡效果）的相关文章

鼠标移动到图片上时，显示大图片

HTML标签中的一部分,仅供参考 <tr> <td><input type="checkbox" class="checkbox1"/></td> <td>1002</td> <td>小猫咪</td> <td><img src="img/02.jpg" height="100" width="100&qu

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

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

把鼠标移动到图片上图片就会放大显示

<html><head><script type="text/javascript">function moveover(){document.getElementById('image').width="200"document.getElementById('image').height="360"}function moveback(){document.getElementById('image').w

两种方式实现鼠标悬停图片逐渐变大

鼠标悬停图片逐渐变大这是一个很常见的效果,这里推荐两种方式,各有优缺点: 1.利用js,通过定时器实现宽高的加减. //鼠标移动图片变大 function change_large(obj,speed,target_width,target_height){ var timer = null; var bengin_width = 140;//初始宽度 var bengin_height = 180;//初始高度 clearInterval(timer); timer = setInterval

CSS鼠标悬停图片上图片变灰 变色 半透明

<!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><meta http-equiv="Content-Typ

利用CSS3实现鼠标悬停在图片上图片缓慢缩放的两种方法

1.改变background-size属性 将图片作为某个html元素的背景图片,用transition属性改变图片的大小. 1 .container{ 2 background-size: 100% 100%; 3 transition: all 2s; 4 } 5 .container:hover{ 6 background-size: 120% 120%; 7 } 这种方法有个问题是图片缩放的时候会出现抖动的现象 2.利用scale 使用img标签,并在img标签上添加transform属

css实现鼠标悬停在图片上图片缓慢缩放效果

方法一: .container{ background-size: 100% 100%; transition: all 2s; } .container:hover{ background-size: 120% 120%; } 方法二: img{ transition: all 2s; } img:hover{ transform:scale(1.2);   //图片放大的倍数 } 原文地址:https://www.cnblogs.com/Zg-blog/p/9385280.html

在 IE8 中鼠标移到图片上图片变空白

在head中加入添加一个元素 <meta http-equiv="X-UA-Compatible"content="IE=8"></meta>

js之图片变大变小效果

1.当鼠标移到图片上,图片变大:当鼠标移出图片,图片变小,效果如图: 2.原理不难,就是鼠标over时,设置一个定时器,让图片逐渐变大,鼠标out时同理,看下最初的简略代码你就会明白: <!DOCTYPE html> <html> <head> <style type="text/css"> div {     width: 200px;           /* 宽度 */     height: 100px;          /*