Hoe voeg je hover-effecten toe aan afbeeldingen in WordPress (5 eenvoudige manieren)?

Het toevoegen van een hover-effect aan je website lijkt misschien een klein detail, maar het kan de uitstraling en gebruiksvriendelijkheid van de site aanzienlijk verbeteren. Wanneer bezoekers met hun muis over een afbeelding of knop bewegen en zien dat deze lichtjes verandert, geeft dit aan dat het element interactief is. 

Deze subtiele beweging verbetert de betrokkenheid en helpt het bouncepercentage te verlagen. Hover-effecten zijn vooral handig in webshops. Ze stellen klanten in staat producten beter te bekijken, waardoor ze worden aangemoedigd om verder te zoeken en af ​​te rekenen.

Er zijn veel manieren om hover-effecten aan afbeeldingen toe te voegen in WordPress, van eenvoudige fades tot opvallende flip-animaties. Hieronder vind je verschillende methoden om aan de slag te gaan!

Hoe voeg je hover-effecten toe aan afbeeldingen in WordPress?

In dit artikel hebben we vijf eenvoudige manieren verzameld om hover-effecten aan je website toe te voegen. Kies de methode die het beste bij jou past!

Methode 1: Een plug-in gebruiken

Een plugin bespaart je veel tijd en moeite, vooral als je meerdere hover-effecten op dezelfde website wilt gebruiken.

Als je bijvoorbeeld meerdere afbeeldingsgalerieën hebt, kun je op elke galerie een andere animatie toepassen, zoals een simpele zoom voor blogminiaturen of een flip-effect voor productafbeeldingen.

Met een plugin zoals Image Hover Effects Ultimate wordt dit proces veel eenvoudiger. Deze plugin is gratis voor iedereen en biedt een breed scala aan effecten voor elk element. Om te beginnen installeer je de plugin door de onderstaande handleiding te volgen: 

Een plugin installeren

• Open je WordPress-beheeromgeving.
• Klik op 'Plugin toevoegen' in het 'Plugins' in de zijbalk.

• Typ 'Image Hover Effects Ultimate' in de zoekbalk.

• Selecteer het eerste resultaat en klik op 'Nu installeren' om de download te starten.
• Zodra de installatie is voltooid, klikt u op de 'Activeren ' om de plugin te gaan gebruiken.

Het gebruik van de WordPress-plugin voor beeldzweefeffecten

• Zodra de plugin is geïnstalleerd, verschijnt er een nieuw 'Afbeelding zweven' in je dashboard.

• Klik op het menu om de plugininstellingen te openen. 

• Kies de effecten die je wilt gebruiken. In deze tutorial gaan we experimenteren met de Beeldvergroter .
• Nadat je het effect hebt geselecteerd, zie je verschillende animatiestijlen.

Als je een stijl hebt gevonden die je bevalt, klik dan op 'Stijl creëren' .

• Er verschijnt een pop-upvenster. Voer een titel in bij het 'Naam' en selecteer een effect uit de lay-out (1e, 2e of 3e). Klik vervolgens op 'Opslaan' om verder te gaan.
• Je wordt doorgestuurd naar een nieuwe pagina waar je de instellingen kunt aanpassen, zoals hoogte, breedte en transparantie. Experimenteer om te zien wat er het beste uitziet.

• Als je tevreden bent met de instellingen, klik je op Bewerken om je afbeelding aan te passen.

• Er verschijnt een nieuw pop-upvenster. Hier kunt u de vergrotingspositie aanpassen. 

• Je kunt de afbeelding ook vervangen door op de 'Afbeelding kiezen' te klikken .
• Nadat je alles hebt ingesteld, klik je op Verzenden om je hover-effect op te slaan.

• Om het effect op je site toe te passen, kopieer en plak je de shortcode in je bericht of pagina. 

• Je eenvoudige hover-effect voor afbeeldingen is nu klaar voor gebruik op elke plek van je website. 

Methode 2: CSS gebruiken

Voor deze methode hoef je geen plugins te installeren. Door middel van aangepaste CSS kun je verschillende hover-effecten aan je thema toevoegen.

We beginnen met iets eenvoudigs, zoals een onderstreep-hover-effect. Als je dit effect aan je thema wilt toevoegen, volg dan de eenvoudige stappen hieronder:

• Navigeer naar het bericht waaraan je een hover-effect wilt toevoegen.
• Voeg een afbeelding toe door op het blok 'Omslag (+) .

• Voer je tekst in het omslagblok . Hier voegen we een titel en een knop toe.

• Stel het lettertype en de stijl naar wens in.
• Sla de pagina op als concept.
• Ga vervolgens naar het Uiterlijk ' in je dashboard.

• Klik vervolgens op Aanpassen en ga naar Extra CSS . Voeg de volgende code toe:

body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #0f0f0f; margin: 0; font-family: Arial, sans-serif; } .hover-underline { font-size: 2rem; color: #ffffff; position: relative; display: inline-block; } .hover-underline::after, .hover-underline::before { content: ''; position: absolute; width: 100%; height: 2px; background: linear-gradient(to right, #ff0000, #00ffff); bottom: -5px; left: 0; transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease-out; } .hover-underline::before { top: -5px; transform-origin: left; } .hover-underline:hover::after, .hover-underline:hover::before { transform: scaleX(1); }
 

• Klik op Publiceren om de code op te slaan.

• Ga nu terug naar je bericht en selecteer de tekst waarop je het onderstreep-effect wilt toepassen.
• Open het gedeelte 'Geavanceerd 'underline-hover' in bij het 'Extra CSS-klassen' .

• Sla de pagina op en bekijk de preview om het effect te zien. 

Er zijn zoveel hover-effecten om uit te kiezen, dus kies er eentje die het beste bij je stijl past. Je kunt leren om zelf CSS te schrijven of voorbeelden vinden in de WordPress-community. Alles is beschikbaar!

Methode 3: Paginabouwers gebruiken (bijv. Elementor)

Met een paginabouwer zoals Elementor kun je je website op een zeer creatieve manier bouwen. Het beschikt over ingebouwde hover-effecten die je direct kunt gebruiken om je site op te fleuren zonder dat je hoeft te programmeren.

Je kunt het ook gebruiken om hover-effecten voor afbeeldingen in WordPress te creëren. In dit gedeelte gaan we experimenteren met de ingebouwde hover-effecten in de paginabouwer zelf.

Om de effecten in te stellen:

• Open de Elementor- editor vanuit het beheerdersdashboard.
• Voeg je afbeelding toe.

• Selecteer je afbeelding en ga vervolgens naar het tabblad Stijl
• Scroll naar beneden en klik op 'Hover' .

• In het 'Hover Animation' vindt u diverse kant-en-klare effecten.

• Hier hebben we het Grow- effect als voorbeeld gekozen. Je kunt vervolgens de overgangsduur, de transparantie en andere instellingen aanpassen aan het ontwerp van je website.

• Als je klaar bent, kun je het effect direct zien zonder dat je het eerst hoeft te bekijken. 

Methode 4: Flipbox-plugins gebruiken

Als je een snelle oplossing zoekt, kun je de flipbox-plugin installeren. Een flipbox-effect is een effect waarbij een afbeelding omdraait, waardoor de inhoud aan de voor- of achterkant zichtbaar wordt wanneer je er met de muis overheen beweegt.

Dit effect is geweldig voor foto's, waarbij je de foto op de voorkant en de cameradetails op de achterkant kunt weergeven. Maar de mogelijkheden zijn eindeloos.

• Ga vanuit je WordPress-dashboard naar het Plugins en selecteer vervolgens Plugin toevoegen .
• Typ Flipbox - Awesome Flip Boxes Image Overlay in de zoekbalk.

• Klik op Nu installeren activeer vervolgens de plugin.

• Om een ​​flipbox te maken, ga je naar het Flipbox en klik je op Nieuw maken .
• Kies de animaties die je mooi vindt. Zodra je er een hebt gevonden, klik je op Stijl maken .

• Er verschijnt een pop-upvenster. Selecteer de gewenste lay-out (1e, 2e of 3e) en voer een titel in. 

• Klik op Opslaan om verder te gaan.
• Vervolgens kom je in het aanpassingsmenu terecht, waar je de effecten kunt instellen en je eigen content kunt toevoegen.

• Scroll naar beneden om het tabblad 'Voorbeeld' 'Bewerken' om de inhoud voor zowel de voor- als achterkant van de flipbox aan te passen.

• Klik na afloop op Verzenden om het op te slaan.

• Om deze flipbox aan je pagina toe te voegen, kopieer en plak je eenvoudig de gegenereerde shortcode in een willekeurige sectie van je website. 

• En dat is alles, hier is het eindresultaat! 

Methode 5: Gutenberg-blokken gebruiken

Gutenberg is de standaard blokeditor van WordPress waarmee je hover-effecten direct in de editor kunt toevoegen.

Hoewel het misschien geen geavanceerde hover-effecten biedt, kun je de animaties verbeteren met behulp van aangepaste CSS.

Laten we als voorbeeld een eenvoudig vervagingseffect maken dat verschijnt wanneer je met de muis over een element beweegt. Hier volgt de stapsgewijze handleiding:

• Navigeer naar het bericht of de pagina waar je het hover-effect wilt toevoegen.
• Klik op het + om een ​​nieuw blok toe te voegen en kies vervolgens het 'Omslag '.

• binnen het omslagblok een alineablok .

• Voer uw titel en een korte beschrijving in.
• Pas de lettergrootte, transparantie, uitlijning en kleur naar wens aan.

• Selecteer vervolgens het Cover- blok om een ​​aangepaste CSS-klasse toe te voegen.
• Open het 'Geavanceerd' in de rechterzijbalk.
• Voer fade-hover-effect in bij het veld 'Extra CSS-klasse' .

• Sla de pagina daarna op als concept.

• Ga naar het Plugins en selecteer je codefragmentplugin. In dit voorbeeld gebruiken we WPCode .
• Maak een nieuw CSS-fragment aan en plak de volgende code erin:

.fade-hover-effect { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; } .fade-hover-effect:hover { opacity: 1; transform: translateY(0); } 

• Sla het codefragment op en activeer het.
• Bekijk nu de preview van je pagina om het hover-fade-effect in actie te zien.

Je kunt dit effect hergebruiken door de klasse `fade-hover-effect` toe te voegen aan elk blok of elke afbeelding. Maar als je met veel afbeeldingen werkt, kun je overwegen een plugin zoals WP Media Folder om je mediabibliotheek in mappen te organiseren. Dit maakt het gemakkelijker om gerelateerde content te vinden en opnieuw te gebruiken.

Heeft het gebruik van te veel effecten invloed op de prestaties?

Ja, het gebruik van te veel hover-effecten op je website kan de prestaties negatief beïnvloeden, vooral als ze niet goed geoptimaliseerd zijn. Dit komt doordat sommige hover-effecten extra CSS vereisen. De omvang van de CSS op je website kan oplopen en de laadtijden van pagina's vertragen.

Het is het beste om alleen essentiële hover-effecten te gebruiken om de gebruikerservaring te verbeteren zonder je site te overladen.

Samenvatting

Leren hoe je hover-effecten aan afbeeldingen toevoegt in WordPress kan je website een boost geven door de interactie met gebruikers te verbeteren en ze betrokken te houden.

Met de vele manieren om hover-effecten toe te voegen, of het nu via plugins, aangepaste CSS of page builders is, heb je de vrijheid om te kiezen wat het beste bij je past. Experimenteer met verschillende stijlen om de stijl te vinden die het beste aansluit op je website!