Image Hover Effect Style 1
Change View
Left View
Top View
Right View
Full View
HTML
<h1>Sliding Caption Hover Effect</h1> <div class="box"> <img src="https://cdn.yahoobaba.net/img/hover-effect-1.jpg" alt=""> <div class="content"> <h3>Flower Rose</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint perspiciatis possimus, qui quia nam, eius atque corporis dolorum officia. Fuga!</p> </div> </div>
CSS
body{ font-family: arial,helvetica; } h1{ text-align: center;line-height: 45px} .box{ border: 2px solid #000; width: 400px; margin: 10px auto; position: relative; overflow: hidden; } .box img{ width: 100%; height: auto; } .content{ color: #fff; background: rgba(0,255,150,0.8); position: absolute; top: 0%; left:100%; width: 100%; height: 100%; padding: 20px; box-sizing: border-box; transition: all 0.5s; } .box:hover .content{ left: 0; } .content p{ border-top:1px solid white ; border-bottom:1px solid white ; padding: 20px 0; }
Javascript
