Use our custom hover styles to add hovers state to your images and elements.
<figure class="itooltip itooltip-dark hover-scale rounded" title='<h5 class="mb-1">Some Title</h5><p class="mb-0">Quam Sit Ornare</p>'> <a href="#"> <img src="./assets/img/photos/p1.jpg" srcset="./assets/img/photos/p1@2x.jpg 2x" alt="" /> </a> </figure> <figure class="itooltip itooltip-light hover-scale rounded" title='<h5 class="mb-1">Some Title</h5><p class="mb-0">Quam Sit Ornare</p>'> <a href="#"> <img src="./assets/img/photos/p2.jpg" srcset="./assets/img/photos/p2@2x.jpg 2x" alt="" /> </a> </figure> <figure class="itooltip itooltip-primary hover-scale rounded" title='<h5 class="mb-1">Some Title</h5><p class="mb-0">Quam Sit Ornare</p>'> <a href="#"> <img src="./assets/img/photos/p3.jpg" srcset="./assets/img/photos/p3@2x.jpg 2x" alt="" /> </a> </figure>
Some Description
<figure class="overlay overlay1 hover-scale rounded"> <a href="#"> <img src="./assets/img/photos/p4.jpg" srcset="./assets/img/photos/p4@2x.jpg 2x" alt="" /> </a> <figcaption> <h5 class="from-top mb-0">Some Title</h5> </figcaption> </figure> <figure class="overlay overlay2 hover-scale color rounded"> <a href="#"> <img src="./assets/img/photos/p5.jpg" srcset="./assets/img/photos/p5@2x.jpg 2x" alt="" /> </a> <figcaption> <h5 class="from-top mb-1">Some Title</h5> <p class="from-bottom">Some Description</p> </figcaption> </figure>
<figure class="lift rounded"> <a href="#"> <img src="./assets/img/photos/p6.jpg" srcset="./assets/img/photos/p6@2x.jpg 2x" alt="" /> </a> </figure> <figure class="hover scale rounded"> <a href="#"> <img src="./assets/img/photos/p3.jpg" srcset="./assets/img/photos/p3@2x.jpg 2x" alt="" /> </a> </figure>
Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.