Image Hover Effect Style 4
Change View
Left View
Top View
Right View
Full View
HTML
<h1>Vertical Rotating Card Effect</h1> <div class="box"> <div class="box-img"> <img src="https://cdn.yahoobaba.net/img/hover-effect-4.jpg" alt=""> </div> <div class="box-content"> <h3>Kristina</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita laudantium, sequi assumenda, cumque facilis perferendis nihil aliquid nemo cum repellat dignissimos soluta qui ut sunt.</p> </div> </div>
CSS
body{ font-family: arial,helvetica;} h1{ text-align: center;line-height: 45px} .box{ width: 400px; margin: 0 auto; position: relative; perspective: 1000px } .box .box-img{ transform: rotateY(0); transition: all 0.5s ease-in-out 0s; } .box:hover .box-img{ transform: rotateY(-90deg); } .box .box-img img{ width: 100%; height: auto; } .box .box-content{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; padding: 60px 20px; border: 1px solid red; box-sizing: border-box; text-align: center; color: #fff; background: rgba(0,0,0,0.7); transform: rotateY(90deg); transition: all 0.5s ease-in-out 0s; } .box:hover .box-content{ transform: rotateY(0); }
Javascript
