Image Hover Effect Style 2
Change View
Left View
Top View
Right View
Full View
HTML
<h1>Zoom In Out Hover Effect</h1> <div class="box"> <img src="https://cdn.yahoobaba.net/img/hover-effect-2.jpg" alt=""> <div class="box-content"> <h3>Coloured Face</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla repellat id fuga, eos fugit voluptas omnis vel, labore a. Dicta sunt assumenda aut, dignissimos animi voluptatum harum quisquam voluptatibus facilis.</p> </div> </div>
CSS
body{ font-family: arial,helvetica; } h1{ text-align: center;line-height: 45px} .box{ width: 400px; border: 2px solid #000; margin: 10px auto; position: relative; overflow: hidden; } .box img{ width: 100%; height:auto; transition: all 0.4s; } .box:hover img{ transform: scale(0); } .box .box-content{ background: brown; color:#fff; position: absolute; left:0; top:0; width: 100%; height: 100%; padding: 30px; box-sizing: border-box; transform:scale(0) rotate(-180deg); opacity: 0; transition: all 0.4s; } .box:hover .box-content{ transform:scale(1) rotate(0deg); opacity: 1; transition-delay: 0.2s; }
Javascript
