css3实现图片遮罩效果鼠标hover以后出现文字
2015-08-18 10:28
916 查看
<!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>
相关文章推荐
- 问题:table 可否实现对角线;结果:用div+css模拟表格对角线
- CSS3展现精彩的动画效果 css3的动画属性
- 控制文本和外观------CSS Binding(CSS类名绑定)
- CSS选择器及用法
- JS+DIV+CSS实现仿表单下拉列表效果
- CSS中属性position位置详解功能讲解与实例分析
- CSS中绝对定位解释
- CSS中对字体进行设置
- css 隐藏 不占位 隐藏 占位
- Css_text
- JS+DIV+CSS实现仿表单下拉列表效果
- 关于HTML,css3自适应屏幕,自适应宽度
- css 之殇
- ionic中使用Cordova Uglify 压缩js与css
- CSS选择器
- HTML&CSS学习总结(一)
- CSS添加的方式
- CSS选择器
- CSS中的body的默认margin
- 20150810 CSS3实现照片墙+图片阴影+按钮特效