css3实现图片遮罩效果鼠标hover以后出现文字

时间:2021-06-06 08:01:00
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#content article {
float: left;
margin-right: %;
max-width: 236px;
position: relative;
width: %;
margin-bottom: 3.5%;
}
#content article:nth-child(4n+) {
margin-right: ;
}
.post-format-content {
position: relative;
background: #;
}
.post-thumbnail {
max-width: %;
height: auto;
overflow: hidden;
}
.content-wrap {
padding: ;
position: absolute;
text-align: center;
width: %;
top: ;
bottom: ;
display: table-cell;
vertical-align: middle;
overflow: hidden;
}
.content-wrap h1.entry-title {
display: table;
font-size: %;
height: %;
text-transform: uppercase;
width: %;
margin:;
}
.edit-link {
z-index: ;
}
.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;
z-index: ;
color: #fff;
text-decoration: none;
opacity: ;
padding: %;
}
.featured-image:hover {
opacity: 0.9;
color: #fff;
background: rgba(,,,0.8);
}
.post-thumbnail img {
display: block;
}
img {
max-width: %;
height: auto;
}
</style>
</head>
<body>
<div id="content">
<article class="post-152 post type-post status-publish format-standard hentry category-people category-photos">
<div class="post-format-content">
<div class="post-thumbnail"> <img width="" height="" src="assets/img/1.jpg" class="attachment-thumbnail wp-post-image" alt=""> </div>
<div class="content-wrap">
<h1 class="entry-title"><a href="" class="featured-image" rel="bookmark">Music & Fashion</a></h1>
</div>
</div>
</article>
<article class="post-152 post type-post status-publish format-standard hentry category-people category-photos">
<div class="post-format-content">
<div class="post-thumbnail"> <img width="" height="" src="assets/img/2.jpg" class="attachment-thumbnail wp-post-image" alt=""> </div>
<div class="content-wrap">
<h1 class="entry-title"><a href="" class="featured-image" title="amp; Fashion" rel="bookmark">Music & Fashion</a></h1>
</div>
</div>
</article>
</div>
</body>
</html>