Comment changer une image au survol avec CSS

juillet 12, 2019février 10, 2020 Amine KOUIS Aucun commentaire

Vous pouvez utiliser la propriété CSS background-image en combinaison avec la pseudo-classe :hover pour modifier l’image au passage de la souris, comme illustré dans l’exemple suivant:

Code source :

<!DOCTYPE html>
<html>
	<head>
	<style type="text/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;
		}
	</style>
	</head>
	<body>
		<div class="person"></div>
	</body>
</html>