Bild gegen Bild tauschen ( css Lösung )

Wie kann man ein Bild tauschen , wenn man mit der Maus über das Bild geht ?

Der hier verwendete Code

<style> #div1{ background-image:url(/image/Schminkkurs-in-Mainz-Moll-1.jpg); background-size:100% 100%; height:200px; width:400px; transition:.3s; } #div1:hover{ background-image:url(/image/unnamed.webp); background-size:100% 100%; height:200px; width:400px; transition:.3s; } </style> <div id="div1" style="background-color:red;padding:3px;border:solid 7px;"> </div>