Image Hover

Copy as markdown --- title: Image Hover description: Visual changes or transformations applied to an image when a user hovers over it. toc: true --- 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 <Example html={`<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. <Example html={`<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. <Example html={`<figure class="img-grayscale"> <img src="https://placehold.co/300x200/7533f9/EEE" class="img-fluid rounded-3" alt="..."> </figure> `} />

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

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.

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.