How to Change Image on Hover with CSS
In this tutorial, we are going to see how to change Image on hover with CSS by using background-image property in combination with :hover pseudo-class to change the image on mouseover, as shown in the following example:
CSS:
.person { width: 380px; height: 720px; margin: 60px; background: url("https://1.bp.blogspot.com/-wOr3u-Ch-90/XSkZGkQzQiI/AAAAAAAAFF8/egAXtj3rguAuel6_rb82EeqglZcsUEZbQCLcBGAs/s320/front.png") no-repeat; } .person:hover { background: url("https://1.bp.blogspot.com/-nGvhJ1mpOcg/XSkZR_ZzTkI/AAAAAAAAFGA/bTd4mJ_Kss0AM--6Q3F666eSDeuGcZ86QCLcBGAs/s320/back.png") no-repeat; }
HTML:
<!DOCTYPE html> <html> <head> <style type="text/css"> /* Put the CSS Style Here */ </style> </head> <body> <div class="person"></div> </body> </html>
Result |
---|