纯CSS实现鼠标移上图片添加阴影效果

2009-12-31 图片特效 ℃

<p><style type="text/css">
*{padding:0;margin:0;}
body{background:#E8EDF1;padding:20px;}
#profileAvatar {overflow:hidden;zoom:1;}
#profileAvatar i{float:left;visibility:hidden;background:url(http://zlcool.com/jscss/demoimg/200912/avatar.gif) 0 0 no-repeat;}
#profileAvatar i i{background-position:100% 0; }
#profileAvatar i i i{background-position:0 100%;}
#profileAvatar i i i i{padding:0 5px 6px 0;background-position:100% 100%; }
#profileAvatar  img{visibility:visible;display:block;padding:3px;border:1px solid #ccc;background:#fff;}</style></p>
<div id="profileAvatar"><i><i><i><i><a href="http://www.zlcool.com"><img id="image" alt="" width="180" onmouseout="show()" onmouseover="show()" src="/images/tx/s1.jpg" /></a> </i></i></i></i></div>
<p>鼠标移上去显示圆滑的阴影 <br />
<br />
<input type="button" onclick="document.getElementById('image').width -=10;" value="缩小图片" /> <script type="text/javascript">
	var imgBg=document.getElementById('profileAvatar').getElementsByTagName('i')
	function show(){
		for(i=0;i<imgBg.length;i++)
		{	
			if(imgBg[i].style.visibility=='visible')
			imgBg[i].style.visibility='hidden';
			else
			imgBg[i].style.visibility='visible'
		}
	}
</script></p>

相关特效代码

热门特效代码: js图片自动切换代码; CSS实现区域内等比例放大缩小图片; JS图片切换效果; 飘动图片广告代码; 鼠标经过图片变大; 简单高效的javascript 幻灯片播放; JavaScript封装的平滑图片滚动，; 点击图片出现大图; 图片局部放大效果特效; 图片上下左右拉伸效果特效

推荐特效代码: 点击按钮淡入淡出弹出图文信息; 探照灯效果图片特效代码; 简单高效的javascript 幻灯片播放; 飘动图片广告代码; JavaScript封装的平滑图片滚动，; 超酷超绚精美图片展示效果代码