How to change image on mouseover using css


Using CSS you can apply many effects to your website. Here I am going to show you one of the effects done by CSS. You see in many websites when you mouse over on button the colour of the button will change which is done by using CSS hover effect. Likewise you can change image using this effect. It is so simple and easy one. For doing this you must know HTML and CSS.


Let’s come to change an image on mouse over using CSS. In this I use my own photo to show you live demo.

Step 1:

First you need to design your image which is to be used. Here I take my photo and duplicate it for show different effect on mouse over. I change face colour using Photoshop to show variation.

change image on hover

Step 2:

After that create your HTML page, for demo purpose only I create one html page in that I am using only one DIV. In this DIV only I put my image and show you the variation on mouse over.

Step 3:

Now your image and html page are ready, then you need CSS where you are going to write code to show mouse over effect. I code CSS for the above html page in that I am using the created image in step 1 as background for that DIV in html page. Here I used TOP and BOTTOM property for background. In normal the top image will show and on mouse over (: hover) bottom image will show. Analyse the below CSS code to get better understanding.

That’s it you done it successfully. I hope you will use the concept in your website. If you have any doubt or feedback commented it on below.