<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>鼠标悬浮加遮罩，图片放大</title>
</head>
<style type="text/css">
/*图片外面的div*/
.main_img {
height: 180px;
width: 250px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.main_img img {
height: 180px;
width: 250px;
z-index: 1;
transition: all 1s ease 0s;
}
.main_img .show {
background: rgba(0, 0, 0, 0.4);
height: 180px;
width: 250px;
position: absolute;
top: 0;
left: 0;
z-index: 200;
opacity: 0;
filter: alpha(opacity=0);
/* transition 属性是一个简写属性，用于设置四个过渡属性： */
/* transition: property duration timing-function delay; */
/* transition-property 规定设置过渡效果的 CSS 属性的名称。 */
/* transition-duration 规定完成过渡效果需要多少秒或毫秒。 */
/* transition-timing-function 规定速度效果的速度曲线。 */
/* transition-delay 定义过渡效果何时开始。 */
/* transition-delay: 0s;
transition-duration: 0.3s;
transition-property: opacity;
transition-timing-function: ease-in; */
transition: opacity 0.3s ease-in 0s;
}
/* 鼠标悬浮时 */
/* 图片放大1.2倍 */
.main_img:hover img {
transform: scale(1.2, 1.2);
}
/*透明度变为1*/
.main_img:hover .show {
opacity: 1;
filter: alpha(opacity=100);
}
</style>
<body>
<div class="main_img">
<img src="pic.jpg">
<div class="show"></div>
</div>
</body>
</html>