鼠标移入div显示查看更多

HTML代码

<div class='box'>
<div class='image'>
  <img src='https://photo.tuchong.com/316540/f/6406791.jpg'
  width='100%'>
</div>
<div class='mask'>
  <a class='link' href='https://blog.csdn.net/Hreticent/article/details/85109668'>
	查看更多
  </a>
</div>
</div>

CSS代码

.mask {
	background-color:rgb(255, 0, 116);
	width: 300px;
	height: 200px;
	position: absolute;
	top: 0;
	z-index: 99;
	display: none
}
 
.image {
	width: 300px;
	height: 200px;
}
 
.box {
	position: relative;
	width: 300px;
}
 
.box:hover .mask {
	display: block;
}
 
.box:hover .link {
	width: 120px;
	height: 40px;
	display: block;
	background: #FFF;
	line-height: 40px;
	text-align: center;
	margin: 80px auto;
	color: #ff00a5
}