css3 实现图片遮罩效果,hover出现文字

当前位置 : 首页 > 网页制作 > CSS > css3 实现图片遮罩效果,hover出现文字

css3 实现图片遮罩效果,hover出现文字

来源: 作者: 时间:2016-01-28 09:27
鼠标hover 以后。图片上面出现一个遮罩, 透明度变化, 显示设置好的文字的文字,完全使用css 实现,下图是效果关键代码 [html] featured-image:hover { opacity: 0 9; color: fff; ba
 
鼠标hover 以后。图片上面出现一个遮罩, 透明度变化,  显示设置好的文字的文字,完全使用css 实现,下图是效果
 
 
关键代码  
[html]  
.featured-image:hover {  
    opacity: 0.9;  
    color: #fff;  
    background: rgba(0,0,0,0.8);  
}  
看吧
[]  
<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>无标题文档</title>  
<style>  
  
#content article {  
    float: left;  
    margin-right: 4%;  
    max-width: 236px;  
    position: relative;  
    width: 22%;  
    margin-bottom: 3.5%;  
}  
#content article:nth-child(4n+4) {  
    margin-right: 0;  
}  
.post-format-content {  
    position: relative;  
    background: #111;  
}  
.post-thumbnail {  
    max-width: 100%;  
    height: auto;  
    overflow: hidden;  
}  
.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;  
}  
.edit-link {  
    z-index: 2;  
}  
.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: 1;  
    color: #fff;  
    text-decoration: none;  
    opacity: 0;  
    padding: 10%;  
}  
.featured-image:hover {  
    opacity: 0.9;  
    color: #fff;  
    background: rgba(0,0,0,0.8);  
}  
.post-thumbnail img {  
    display: block;  
}  
img {  
    max-width: 100%;  
    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="480" height="640" src="assets/img/1.jpg" class="attachment-thumbnail wp-post-image" alt="105694702"> </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="480" height="640" src="assets/img/2.jpg" class="attachment-thumbnail wp-post-image" alt="105694702"> </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>  
 
Tag:
网友评论

<