<!DOCTYPE html> <html> <meta charset=utf-8> <head> <style> body{ backgound:#f9f9f9; } .img{ position: absolute; 300px; height: 200px; border:10px solid #ccc; overflow:hidden; } .img img{ 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="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="#" class="info">Read More</a> </div> </div> </body> </html>
<!DOCTYPE html> <html> <meta charset=utf-8> <head> <style> body{ backgound:#f9f9f9; } .view { 300px; height: 200px; margin: 10px; float: left; border: 10px solid #fff; overflow: hidden; position: relative; text-align: center; -webkit-box-shadow: 2px 1px 5px #ccc; -moz-box-shadow: 2px 1px 5px #ccc; box-shadow: 2px 1px 5px #ccc; cursor: default; background: #fff; } .mask{ 360px; height: 470px; background: rgba(115,146,184, 0.7); position: absolute; top: 0px; left: 0px; -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; transform: translate(265px, 145px) rotate(45deg); } .view:hover .mask{ left: -249px; top: -313px; } .content{ position:absolute; top:0; left:0; 100%; height:100%; z-index:9999; } .content h2{ position: absolute; top: -80px; 100%; right: -310px; color:#fff; transition: all 0.2s ease-in-out; } .content:hover h2{ top:0; left:0; } .content p{ position: absolute; 100%; bottom: -100px; color:#fff; right: -319px; transition: all 0.5s ease-in-out; } .content:hover p{ bottom:0; left:0; } .info{ text-decoration: none; color:#fff; background: rgba(11, 11, 11, 0.8); padding:10px; position: relative; top: -40px; transition: all 0.9s ease-in-out; } .vide:hover a{ top:60px; } </style> </head> <body> <div class="view view-second"> <img src="1.jpg"> <div class="mask"></div> <div class="content vide"> <h2>Hover Style #2</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="#" class="info">Read More</a> </div> </div> </body> </html>
