Hoe verander je een afbeelding met CSS of jQuery

In deze handleiding leer je hoe je een afbeelding kunt wijzigen met HTML, CSS en jQuery. Het korte antwoord is om de background property van CSS te gebruiken met :hover selector.

Als je hiervoor alleen jQuery wilt gebruiken, kun je ook de jQuery attr() functie gebruiken met de hover() functie voor hover event.
Let’s find out the different examples given below.

Je kan natuurlijk ook een pagebuilder gebruiken, maar dit is vind ik eigenlijk veel makkelijker.

Hoe verander je een afbeelding bij hover met alleen CSS

Om de afbeelding bij zweven te wijzigen met alleen CSS, moet je het < div > element gebruiken en er een afbeelding aan toevoegen met de background property.

Gebruik daarna de :hover selector waarin je een andere afbeelding moet opgeven die wordt vervangen door de vorige afbeelding bij div hover.

Afbeelding wisselen bij hover met alleen CSS

Voorbeeld

<style>
.userdiv{
    width: 225px;
    height: 225px;    
    background: url('/images/afbeelding1.jpg');
}
.userdiv:hover{
    background: url('/images/afbeelding2.jpg');
}
</style>
<div class="userdiv"></div>

Hoe verander je een afbeelding bij hover met alleen CSS

Hoe verander je een afbeelding bij hover met alleen CSS? Dit staat hier goed uitgelegd:

https://stackoverflow.com/questions/19752986/jquery-change-image-src-on-hover