Image Hover Effect Style 7
Change View
Left View
Top View
Right View
Full View
HTML
<h1>Rotating Card Effect</h1> <div class="box"> <div class="box-pic"> <img src="https://cdn.yahoobaba.net/img/hover-effect-7.jpg" alt=""> </div> <div class="box-content"> <h3>Web Designer</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi corrupti totam labore ea nemo repellat facilis commodi minima dolor vel.</p> </div> </div>
CSS
body{ font-family: arial,helvetica;overflow: hidden;} h1{ text-align: center;line-height: 45px} .box{ width: 390px; margin: 0 auto; position: relative; } .box .box-pic{ position: relative; transform-origin: 95% 50% 0; transition: all 0.5s; z-index: 1; } .box .box-pic:after{ content: ""; position: absolute; top:50%; left: 95%; width: 8px; height: 8px; background: #000; border-radius: 50%; } .box .box-pic img{ border-radius: 50%; } .box:hover .box-pic{ transform: rotate(-140deg); } .box .box-content{ text-align: center; color: #fff; position: absolute; top:0; left:0; width: 100%; height: 100%; background: brown; border-radius: 50%; padding: 70px 20px; box-sizing: border-box; }
Javascript
