首页 > 代码库 > Css3案例
Css3案例
<!DOCTYPE html><html><meta charset=utf-8> <head> <style> body{ backgound:#f9f9f9; } .img{ position: absolute; width: 300px; height: 200px; border:10px solid #ccc; overflow:hidden; } .img img{ width:100%; height:100%; transition:all .3s ease; } .img:hover img{ -webkit-transform:scale(1.5); } .back{ z-index:9999; background-color: rgba(219,127,8, 0); position: absolute; top: 0; left: 0; height:100%; text-align: center; color: #000; -webkit-transition:all .5s ease; } .back h2{ text-align:center; color:#000; -webkit-transition:all .5s ease; background-color: rgba(0,0,0, 0.5); height:30px; position: relative; top: -55px; } .back p{ position: relative; bottom: -130px; -webkit-transition:all .5s ease; } .back:hover h2{ text-align:center; color:#fff; top:0; } .back:hover p{ text-align:center; color:#fff; bottom:0; } .info{ background-color: rgba(0,0,0,.7); padding:5px; color:#fff; text-decoration: none; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .back:hover a{ -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .back:hover{ background-color: rgba(219,127,8,.7); } </style> </head><body><div class="img"> <img src=http://www.mamicode.com/"1.jpg"> <div class="back"> <h2>Hover Style #1</h2> <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p> <a href=http://www.mamicode.com/"#" class="info">Read More</a> </div> </div></body></html>
Css3案例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。