Skip to Content

How to Use CSS to Create Image Transitions on Hover

Your website's images play a massive role in the overall design, look, and branding feel of your website. However, they can do more than that. They can even be a UX resource, streamline navigation, and encourage users to engage with certain website elements over others. 

This tutorial will teach you how to use some simple CSS to make image transitions whenever a user hovers their cursor over an image. Hover transitions can help get your users' attention. Hover transitions (especially with regard to images) often situate users within the scope of possible actions, and they encourage users to follow your intended course of action. 

Here's how to make image transitions on a hover using simple CSS.  


The HTML is extremely straightforward and utilizes a combination of standard bootstrap columns with some custom classes.


The biggest takeaway from the CSS is the ".main-hero .col:hover .col-bg" class, which takes advantage of the transform property to initialize the image transition effect.

Want to see how it all looks before committing to its use? Check out the JSFiddle below. Hover over the background images to see the hover effect. Be sure to scale your browser windows to various sizes to see how these sections would look on mobile display.

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev
Solodev Logo

©2024 Solodev. All rights reserved worldwide.