该小案例是使用纯css实现一个相册,具备的功能有鼠标划过出现图片放大,且放大的图片出现在原来位置的正中央
具体代码如下:
在这里插入代码片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片放大</title>
<link rel="stylesheet" href="css/comment.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<ul>
<li><a href=""><img src="img/photo01.jpg" alt=""></a></li>
<li><a href=""><img src="img/photo02.jpg" alt=""></a></li>
<li><a href=""><img src="img/photo03.jpg" alt=""></a></li>
<li><a href=""><img src="img/photo04.jpg" alt=""></a></li>
<li><a href=""><img src="img/photo05.jpg" alt=""></a></li>
<li><a href=""><img src="img/photo06.jpg" alt=""></a></li>
<li><a href=""><img src="img/photo07.jpg" alt=""></a></li>
<li><a href=""><img src="img/photo08.jpg" alt=""></a></li>
<li><a href=""><img src="img/photo09.jpg" alt=""></a></li>
<li><a href=""><img src="img/photo10.jpg" alt=""></a></li>
<li><a href=""><img src="img/photo11.jpg" alt=""></a></li>
<li><a href=""><img src="img/photo12.jpg" alt=""></a></li>
<li><a href=""><img src="img/photo13.jpg" alt=""></a></li>
<li><a href=""><img src="img/photo14.jpg" alt=""></a></li>
<li><a href=""><img src="img/photo15.jpg" alt=""></a></li>
<li><a href=""><img src="img/photo16.jpg" alt=""></a></li>
<li><a href=""><img src="img/photo17.jpg" alt=""></a></li>
<li><a href=""><img src="img/photo18.jpg" alt=""></a></li>
<li><a href=""><img src="img/photo19.jpg" alt=""></a></li>
<li><a href=""><img src="img/photo20.jpg" alt=""></a></li>
</ul>
</body>
</html>
## css代码块
ul {
width: 625px;
height: 440px;
margin: 50px auto;
}
ul li{
width: 116px; height: 91px; background:#eee; border: 1px solid #aaa;
float: left; /*margin-top: 6px; margin-left: 6px;*/ margin: 6px 0 0 6px;
}
ul li a{
width:104px;
height: 79px;
background: #fff;
border: 1px solid #b3b3b3;
display: block;
margin-top: 5px; margin-left: 5px;
}
ul li a img{
width: 100px;
height: 75px;
margin-top: 2px;
margin-left: 2px;
}
ul li a img:hover{
width:200px; height: 150px;
position: relative;
left: -44px;
top: -31px;
z-index: 2;
border: 1px solid #000;
background:#fff; padding: 2px;
}`
