鼠标滑动到图片时，图片出现遮罩
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.content-wrap {
padding: 0;
position: absolute;
text-align: center;
width: 100%;
top: 0;
bottom: 0;
display: table-cell;
vertical-align: middle;
overflow: hidden;
}
.content-wrap h1.entry-title {
display: table;
font-size: 110%;
height: 100%;
text-transform: uppercase;
width: 100%;
margin:0;
}
.featured-image {
display: table-cell;
position: relative;
transition: opacity .25s ease-in-out, background .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out, background .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out, background .25s ease-in-out;
vertical-align: middle;
color: #fff;
text-decoration: none;
opacity: 0;
padding: 10%;
}
.featured-image:hover {
opacity: 0.9;
color: #fff;
background: rgba(0,0,0,0.8);
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div style="position: relative;">
<div >
<img width="480" height="640" src="img/app.png">
</div>
<div class="content-wrap">
<h1 class="entry-title">
<a href="" class="featured-image" rel="bookmark">Music & Fashion</a>
</h1>
</div>
</div>
</body>
</html>
