Use our custom hover styles to add hover 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="..." srcset="...@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="..." srcset="...@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="..." srcset="...@2x.jpg 2x" alt="" /> </a> </figure>
Some Description
<figure class="overlay overlay-1 hover-scale rounded"> <a href="#"> <img src="..." srcset="...@2x.jpg 2x" alt="" /> </a> <figcaption> <h5 class="from-top mb-0">Some Title</h5> </figcaption> </figure> <figure class="overlay overlay-2 hover-scale color rounded"> <a href="#"> <img src="..." srcset="...@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="overlay overlay-3 overlay-gradient-1 hover-scale rounded"> <a href="#"> <img src="..." srcset="...@2x.jpg 2x" alt="" /> </a> <figcaption> <h5 class="from-left mb-1">Some Title</h5> <p class="from-left mb-0">Some Description</p> </figcaption> </figure> <figure class="overlay overlay-3 overlay-gradient-2 hover-scale rounded"> <a href="#"> <img src="..." srcset="...@2x.jpg 2x" alt="" /> </a> <figcaption> <h5 class="from-left mb-1">Some Title</h5> <p class="from-left mb-0">Some Description</p> </figcaption> </figure> <figure class="overlay overlay-3 overlay-gradient-3 hover-scale rounded"> <a href="#"> <img src="..." srcset="...@2x.jpg 2x" alt="" /> </a> <figcaption> <h5 class="from-left mb-1">Some Title</h5> <p class="from-left mb-0">Some Description</p> </figcaption> </figure> <figure class="overlay overlay-3 overlay-gradient-4 hover-scale rounded"> <a href="#"> <img src="..." srcset="...@2x.jpg 2x" alt="" /> </a> <figcaption> <h5 class="from-left mb-1">Some Title</h5> <p class="from-left mb-0">Some Description</p> </figcaption> </figure> <figure class="overlay overlay-3 overlay-gradient-5 hover-scale rounded"> <a href="#"> <img src="..." srcset="...@2x.jpg 2x" alt="" /> </a> <figcaption> <h5 class="from-left mb-1">Some Title</h5> <p class="from-left mb-0">Some Description</p> </figcaption> </figure> <figure class="overlay overlay-3 overlay-gradient-6 hover-scale rounded"> <a href="#"> <img src="..." srcset="...@2x.jpg 2x" alt="" /> </a> <figcaption> <h5 class="from-left mb-1">Some Title</h5> <p class="from-left mb-0">Some Description</p> </figcaption> </figure> <figure class="overlay overlay-3 overlay-gradient-7 hover-scale rounded"> <a href="#"> <img src="..." srcset="...@2x.jpg 2x" alt="" /> </a> <figcaption> <h5 class="from-left mb-1">Some Title</h5> <p class="from-left mb-0">Some Description</p> </figcaption> </figure>
<figure class="lift rounded"> <a href="#"> <img src="..." srcset="...@2x.jpg 2x" alt="" /> </a> </figure> <figure class="hover-scale rounded"> <a href="#"> <img src="..." srcset="...@2x.jpg 2x" alt="" /> </a> </figure>
<figure class="hover-scale cursor-dark rounded"> <a href="#"> <img src="..." srcset="...@2x.jpg 2x" alt="" /> </a> </figure> <figure class="hover-scale cursor-light rounded"> <a href="#"> <img src="..." srcset="...@2x.jpg 2x" alt="" /> </a> </figure> <figure class="hover-scale cursor-primary rounded"> <a href="#"> <img src="..." srcset="...@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.