Skip to content
Related Articles

Related Articles

Improve Article

How to change image on hover with CSS ?

  • Difficulty Level : Medium
  • Last Updated : 26 Nov, 2020

The approach of this article is to change an image when the user hovering the mouse over it. This task can be simply done by using the CSS background-image property in combination with the :hover pseudo-class to replace or change the image on mouseover. 


Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.


<!DOCTYPE html>
<html lang="en">
        How to Change Image on 
        Hover in CSS
        .sudo {
            width: 230px;
            height: 195px;
            margin: 50px;
            background-image: url(
        .sudo:hover {
            background-image: url(
        How to change image on 
        hover with CSS
    <div class="sudo"></div>


Before hovering the mouse over the image:

After hovering the mouse over the image: 

Supported Browsers are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

My Personal Notes arrow_drop_up
Recommended Articles
Page :