Divi tutorial: Een afbeelding veranderen als je eroverheen beweegt

Divi website tutorial een afbeelding veranderen als je eroverheen beweegt

Heb je afbeeldingen op je website staan die je graag een tof mouse-over effect wil geven? Dit lijkt misschien erg ingewikkeld. Maar met behulp van de Divi builder is dit veel makkelijker dan je zou denken. In deze blog laat ik zien hoe je in een paar klikken een afbeelding op je Divi website kan veranderen als je eroverheen beweegt.

Wanneer kan je een mouse-over effect gebruiken?

Een mouse-over effect over je afbeeldingen, kan een toffe toevoeging voor je website zijn. Je kan het bijvoorbeeld gebruiken als je meerdere foto’s wilt tonen van een bepaald project of iets vanuit meerdere hoeken wilt laten zien.

Je zou ook de foto’s van je team op deze manier kunnen tonen. Gebruik bijvoorbeeld eerst een pasfoto en voeg als hover effect een foto toe van de persoon terwijl deze aan het werk is.

Het is natuurlijk ook mogelijk om een foto in zwart/wit te tonen en deze dan gekleurd te maken wanneer je eroverheen beweegt. Dit kan je bijvoorbeeld gebruiken voor een portfolio of fotografie website.

Hoe kan je een afbeelding veranderen als je eroverheen beweegt in Divi?

Om de afbeelding in Divi te veranderen als je eroverheen beweegt. Ga je naar de Divi builder en open je de instellingen van de afbeelding door op het tandwiel icoon te klikken.

Vervolgens selecteer je naast afbeelding het cursor icoon en klik je nogmaals op de cursor in het vak eronder.

Je kan dan de afbeelding vervangen door erop te klikken.

Sla je wijzigingen ten slotte op met het vinkje.

Kan dit ook voor WooCommerce afbeeldingen?

Het is ook tof om deze optie toe te voegen aan je webshop. Zo kan je als hover effect de details van het product laten zien.

Helaas is deze optie in Divi nog niet beschikbaar voor je WooCommerce afbeeldingen. Je zou daarvoor eventueel wel een plugin of code kunnen gebruiken.

Ontwerp helemaal zelf je huisstijl in één dag

Leer een kleurenpalet samenstellen, lettertypes uitkiezen en combineren, je logo ontwerpen en nog veel meer. Download nu de gratis gids en start direct!

Bedankt voor je download! Je kan de gids binnen enkele minuten in je mailbox verwachten.