Image Hover

Visual changes or transformations applied to an image when a user hovers over it.

Image hover effects are visual changes or transformations applied to an image when a user hovers over it with their mouse. The goal of image hover effects is to enhance the user experience by providing interactive feedback, making the design more engaging and dynamic.

Image lift

Image lift is a design effect where an image component appears to "lift" or elevate on hover

...
<figure class="img-lift pt-3">
 <img src="https://placehold.co/300x200/7533f9/EEE" class="img-fluid rounded-3" alt="...">
</figure>

Image scale

Image scale is a visual effect where an image grows in size on hover, creating the illusion of zooming in while maintaining its position within the container.

...
<figure class="img-scale rounded-3">
<img src="https://placehold.co/300x200/7533f9/EEE" class="img-fluid rounded-3" alt="...">
</figure>

Image grayscale

This hover effect transforms an image from full color to black and white, and reverts back to color when hovered, creating an interactive visual transition.

...
<figure class="img-grayscale">
<img src="https://placehold.co/300x200/7533f9/EEE" class="img-fluid rounded-3" alt="...">
</figure>
On this page
Quick Links
Admin
Admin Dashboard Example

Themes

Other