<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.1.1.min.js"></script>
<style>
div{
position: relative;
width:352px ;
height: 274px;
overflow: hidden;
}
img {
position: absolute;
}
p {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(255,60,99,0.3);
line-height: 260px;
padding-left: 120px;
display: none;
}
div:hover >p{
display: block;
}
</style>
</head>
<body>
<div>
<img src="img/1.png">
<p><a href="#">this ia s monster</a></p>
</div>
</body>
</html>
原文：http://www.cnblogs.com/iriliguo/p/6483093.html