CSS放大图片，鼠标经过放大图片，有的人把它称为放大镜效果。实现方法是：先定义一个图片列表，可以不设置图片的长宽，此时图片默认显示大小，然后定义此图片hover属性，也就是鼠标放上后的变化，这里我们定义图片的长宽要稍大于图片原始大小，这样这种功能就完成了，具体请看代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1889/xhtml">
<head>
<title>CSS图片放大镜效果-www.31jz.com</title>
<style type="text/css">
body{margin:0;padding:0;}
ul#bigs{
LIST-STYLE-TYPE: none;DISPLAY:inline;
margin: 0px;
clear: both;
}
ul#bigs li{
FLOAT: left;
display: inline;
margin-top: 9px;
margin-left: 8px;
}
ul#bigs li a {
display: block;width:116px;
}
ul#bigs li a img{
border:1px #666 solid;
}
ul#bigs li a:hover{
position: absolute;
z-index:100;
margin: -8px;
}
ul#bigs li a:hover img{
width:138px;
height:107px;
border:1px #ccc solid;
}
</style>
</head>
<body>
<div>
<ul id="bigs">
<li><a href="/"><img src="https://pic2.imgdb.cn/item/645f3c750d2dde57778d41c4.png" /></a></li>
<li><a href="/"><img src="https://pic2.imgdb.cn/item/645f3b250d2dde57778a7c94.png" /></a></li>
<li><a href="/"><img src="https://pic2.imgdb.cn/item/645f3d3e0d2dde57778f10c2.png" /></a></li>
</ul>
</div>
</body>
</html>
本文地址：https://31jz.com/jzjc/832.html