Hur man lägger till bildeffekter vid hovring i WordPress (steg för steg)

Vi vet hur mycket ansträngning som läggs ner på att välja de perfekta bilderna för din webbplats. Men ibland kan även de bästa fotona kännas lite statiska och misslyckas med att fånga en besökares fulla uppmärksamhet.

Att lägga till en enkel hovringsanimering kan vara den lilla detalj som får din webbplats att kännas mer professionell och engagerande. Många tror att detta kräver anpassad kod, men vi har hittat flera enkla sätt att göra det på våra egna projekt utan någon kodning alls.

I den här artikeln guidar vi dig genom fem enkla, steg-för-steg-metoder för att lägga till vackra bild-hover-effekter i WordPress. Vi täcker allt från enkla blekningar till interaktiva flipboxar.

Varför använda bild-hover-effekter i WordPress?

Bildeffekter vid hovring låter dig lägga till korta animationer till dina bilder, som zoomningar, blekningar, popup-fönster och mer. Detta kommer att göra dina bilder mer intressanta och engagerande, även om en sida har många bilder.

Du kan också använda hover-effekter för att dra besökarens uppmärksamhet till det viktigaste innehållet. Du kan till exempel använda CSS-animationer för att markera din webbplats logotyp eller uppmaning till handling.

Låt oss dyka ner i 5 nybörjarvänliga sätt att lägga till olika bildhovringseffekter på din WordPress-webbplats. Använd helt enkelt snabblänkarna nedan för att hoppa direkt till den effekt du vill använda:

• Alternativ 1: Lägg till Flipbox-effekter i WordPress (snabbt och enkelt)
• Alternativ 2: Lägg till zoom- och förstoringseffekter för bilder (Bäst för onlinebutiker)
• Alternativ 3: Låt bilder tona bort vid muspekning i WordPress (Bäst för prestanda)
• Alternativ 4: Lägg till flera bildeffekter vid hovring i WordPress (mest anpassningsbart)
• Alternativ 5: Lägg till popup-effekter vid bildeffekter med en visuell CSS-redigerare
• Vanliga frågor om bild-hover-effekter
• Lär dig fler sätt att använda och hantera bilder i WordPress

Alternativ 1: Lägg till Flipbox-effekter i WordPress (snabbt och enkelt)

Det enklaste sättet att lägga till hover-effekter i WordPress är att använda flipboxes. En flipbox är helt enkelt en ruta som vänder sig när du för muspekaren över den. Detta gör att du kan visa en annan bild, text eller uppmaning till handling vid muspekaren.

Om du är en fotograf, kanske du visar ett foto på ena sidan av flipboxen och information om kameramodellen eller upplösningen på den andra sidan.

Om du säljer digital konst eller grafik online, kan du till och med lägga till en knapp som besökare kan klicka på för att köpa den bilden.

Det enklaste sättet att skapa flipboxar är att använda Flipbox – Awesomes Flip Boxes Image Overlay. Detta kostnadsfria plugin kommer med flera olika flipbox-stilar som innehåller en blandning av bilder, text och knappar för uppmaning till handling.

Det första du behöver göra är att installera och aktivera Flipbox-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

När pluginet är installerat och aktiverat kan du skapa din första flipbox genom att gå till Flip Box » Skapa ny.

Detta visar alla olika mallar du kan använda.

För att välja en design, klicka på knappen 'Create Style'.

I popup-fönstret som visas, skriv in ett namn för flipbox-designen. Detta är bara för din referens, så du kan använda vad du vill.

Du kan också välja vilken layout du vill använda genom att klicka på antingen 1:a, 2:a eller 3:e.

Efter att ha valt en flipbox-stil kan du ändra typsnitt, marginaler och utfyllnad.

Du kan sedan lägga till text, bilder och ikoner på båda sidor av flipboxen.

När du är nöjd med hur flipboxen ser ut, kanske du vill lägga till fler rutor genom att klicka på '+' i sektionen 'Add New Flip Boxes'.

Detta gör att du kan skapa flera flipboxar med samma stil och sedan organisera dem i kolumner och rader.

Till exempel kan du skapa en flipbox för varje prisplan.

Shoppare kan sedan föra muspekaren över en plan för att se kostnaden.

När du är nöjd med hovringsanimeringarna kan du lägga till den på vilken sida, inlägg eller widget-redo område som helst med en kortkod som pluginet automatiskt tillhandahåller.

För steg-för-steg-instruktioner, se vår guide om hur man skapar flipbox-överlägg och hovringar.

Alternativ 2: Lägg till zoom- och förstoringseffekter för bilder (Bäst för onlinebutiker)

Zoom-effekter låter användare se detaljer som normalt inte skulle vara synliga. Om du har en e-handelsbutik eller en online-marknadsplats, då tillåter detta shoppare att utforska en produkt i mer detalj, vilket kan ge dig fler försäljningar.

Zoom-effekter kan också lägga till mer interaktion och engagemang på din webbplats.

Till exempel kan du skapa enkla pussel och spel som utmanar besökare att upptäcka små detaljer i dina bilder. Detta kan hålla dem kvar på din webbplats längre, vilket kommer att öka dina sidvisningar och minska avvisningsfrekvensen.

Det bästa WordPress-pluginet för att lägga till bildeffektförstoring och zoomningseffekter är WP Image Zoom.

Detta plugin för hover-effekter låter dig anpassa hur zoom-effekten ser ut och beter sig på hela din WordPress-webbplats. Du kan sedan aktivera zoom för vilken bild som helst.

Vi kommer att använda gratisversionen i den här guiden, men om du vill ha fler anpassningsalternativ kan du vilja kolla in WP Image Zoom Pro. Se vår WP Image Zoom-recension för mer information.

Först måste du installera och aktivera pluginet WP Image Zoom . För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering måste du gå till sidan WP Image Zoom » Zoominställningar från WordPress admin sidofält. Om den inte redan är vald, klicka sedan på ‘Zoominställningar’.

Till att börja med kan du välja mellan några olika linsformer.

Du kan också välja en markörtyp, ställa in en animationseffekt, aktivera zoom vid muspekaren över eller muspekaren klick, och definiera en zoomnivå.

När du är nöjd med hur zoomen är inställd kan du lägga till effekten på valfri bild. I Gutenberg blockredigerare, klicka för att välja bilden där du vill lägga till en zomeffekt. Eller, ladda upp en bild först till WordPress.

I menyn till höger, välj knappen 'with Zoom'.

Om du använder WooCommerce, kan du aktivera zoom på alla dina produktbilder i pluginets inställningar. Detta är idealiskt om du vill aktivera zoom över hela din webbutik utan att behöva uppdatera varje produkt individuellt.

I fliken 'Allmänna inställningar', markera rutan 'Aktivera zoom...', så kommer kunderna att kunna förstora alla produktbilder.

För mer information, se vår guide om hur man lägger till förstoringsglas för bilder i WordPress.

Alternativ 3: Låt bilder tona bort vid muspekning i WordPress (Bäst för prestanda)

Ett annat alternativ är en enkel övertoningsanimation, där dina bilder långsamt visas eller försvinner när en besökare för muspekaren över dem. Detta är ett utmärkt sätt att framhäva bilder när användaren rör sig runt på sidan.

Du kan använda denna effekt för att guida besökaren genom ditt innehåll eller till och med lägga till ett berättande element till ett inlägg.

Till skillnad från vissa komplexa animationer är blekningseffekten mycket subtil. Den kommer inte att negativt påverka läsupplevelsen eller störa dina ansträngningar för bildoptimering.

Detta gör det till ett perfekt val för sidor som har många högupplösta foton.

Det enklaste sättet att lägga till denna effekt är att använda det kostnadsfria pluginet WPCode. Det låter dig lägga till anpassad CSS utan att behöva redigera dina temafiler direkt, vilket är mycket säkrare.

Här på WPBeginner använder vi WPCode för att hantera alla anpassade kodsnuttar som driver vår webbplats. Det är ett pålitligt verktyg som vi rekommenderar för att lägga till alla typer av anpassad kod. För mer information kan du läsa vår fullständiga WPCode-recension.

För fullständiga instruktioner om hur du använder WPCode för denna effekt, se vår guide om hur du tonar ut bilder vid muspekaren i WordPress.

Alternativ 4: Lägg till flera bildeffekter vid hovring i WordPress (mest anpassningsbart)

Du kanske vill använda flera olika bild-hover-effekter på din webbplats. Om du till exempel har många bildgallerier, kanske du vill animera dessa foton på olika och intressanta sätt.

Det bästa sättet att lägga till flera hover-effekter i WordPress är att använda Image Hover Effects Ultimate. Detta gratis plugin stöder ett brett utbud av effekter som du kan anpassa efter dina behov.

Det första du behöver göra är att installera och aktivera pluginet Image Hover Effects Ultimate. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering, välj 'Bild-hovereffekt' från WordPress-instrumentpanelen. Du kommer nu att se alla olika typer av hovereffekter du kan använda.

För den här guiden kommer vi att välja 'Caption Effects', som lägger till animerad text ovanpå en bild.

Du kan skapa vilken typ av hover-effekt du vill, även om alternativen du ser kan variera.

Efter att ha klickat på ‘Bildtexsteffekter’, ser du alla olika stilar du kan använda.

Håll bara muspekaren över en stil för att se en förhandsgranskning av hur animationen kommer att se ut.

När du hittar en stil du gillar, klicka på knappen ‘Skapa stil’.

Detta öppnar en popup där du kan välja exakt layout du vill använda. Gå helt enkelt vidare och klicka på 1:a, 2:a eller 3:e.

När det är gjort, skriv en titel i fältet ‘Namn’. Detta är bara för din referens, så du kan använda vad som helst som hjälper dig att identifiera den animerade bilden i din WordPress-instrumentpanel.

Klicka sedan på 'Spara'.

Detta tar dig till en skärm där du kan anpassa hover-effekten. Detta inkluderar att ändra innehållets bredd och höjd, öka utfyllnaden och lägga till en skuggning.

När du gör ändringar uppdateras förhandsgranskningen automatiskt, så du kan prova olika inställningar för att se vad som ser bäst ut.

För vissa hovringseffekter kan du ändra effekternas riktning.

Till exempel, i följande bild ändrar vi riktningen på effekten 'persienner' så att den går åt höger.

Du kan också göra effekten snabbare eller långsammare genom att dra reglaget ‘Effekttid’. Om du använder ett högre nummer, kommer effekten att vara längre. Om du gör numret mindre, kommer effekten att vara snabbare och kortare.

Om du har ett specifikt antal i åtanke kan du skriva det i rutan bredvid reglaget ‘Effekttid’.

När du är nöjd med hur effekten är inställd är det dags att lägga till lite innehåll.

För att göra detta, för muspekaren över avsnittet ‘Förhandsgranska’ och klicka på knappen ‘Redigera’ när den visas.

Detta öppnar ett popup-fönster där du kan skriva in en titel och en kort beskrivning.

Detta är innehållet som visas när en besökare för muspekaren över bilden.

Därefter kan du ersätta standardbilden med din egen bild.

Håll bara muspekaren över platshållarfotot och klicka sedan på 'Välj bild' när den visas.

Du kan nu antingen välja en bild från WordPress mediebibliotek eller ladda upp en ny fil från din dator.

Ibland kan du använda hover-effekter för att skicka besökare till andra delar av din WordPress-blogg eller webbplats. Om du till exempel driver en onlinebutik, kan du lägga till en länk till produkten som visas på bilden.

Du kan göra detta genom att lägga till en CTA-knapp, som kommer att visas under den korta beskrivningen.

För att komma igång, lägg till URL:en i fältet 'Länk'.

Lägg sedan till ditt meddelande genom att skriva i fältet 'Knapptext'.

När du är nöjd med den information du har angett, klicka på ‘Skicka in’.

Nu när du har lagt till lite text är det en bra idé att klicka på fliken 'Typografi'.

Här kan du ändra teckenstorleken, lägga till en textskugga, göra marginalerna större eller mindre, och mycket mer.

Om du använder en CTA-knapp, se till att du klickar för att expandera sektionen ‘Knappinställningar’.

Här kan du ändra hur knappen ser ut i sitt standard- och 'hover'-läge, vilket är hur den ser ut när besökaren för muspekaren över den. Du kan också ändra knappens justering.

De flesta av dessa inställningar är okomplicerade, så det är värt att titta igenom dem för att se vilka olika typer av effekter du kan skapa.

När du är nöjd med hur förhandsgranskningen ser ut, klickar du på ‘Spara’ för att lagra dina ändringar.

Vill du skapa en rad eller kolumn med animerade bilder?

Till exempel kan du använda bild-hover-effekter för att marknadsföra din produkts bästa funktioner. I följande bild kan besökaren hovra över varje bild för att läsa om en annan funktion.

Vill du skapa en hel rad eller ett galleri med dessa animerade bilder? Inga problem. För att lägga till ytterligare en, scrolla helt enkelt upp till sektionen ‘Lägg till ny bild-hover’.

Klicka här på ‘+’-knappen.

Detta öppnar ett popup-fönster där du kan skapa en ny bildeffekt vid hovring, enligt samma process som beskrivs ovan.

När du är nöjd med hur effekten är konfigurerad, klicka på knappen ‘Skicka in’ för att spara dina ändringar.

För att skapa fler hover-effekter, upprepa helt enkelt samma process som beskrivs ovan.

När du är nöjd med hur effekterna är inställda, scrolla ner till rutan 'Shortcode'. Du kan lägga till denna hover-effekt på vilken sida eller inlägg som helst genom att kopiera och klistra in denna kod.

För mer information om hur du placerar kortkoden, se vår guide om hur man lägger till en kortkod i WordPress.

Alternativ 5: Lägg till popup-effekter vid bildeffekter med en visuell CSS-redigerare

Många av plugins ovan låter dig bygga avancerade animerade bilder, som flipboxar, och sedan placera dem på en sida med hjälp av kortkod. Ibland vill du dock kanske lägga till en hover-effekt på en bild som redan finns på sidan.

I detta fall kan du använda ett anpassat CSS-plugin för WordPress. Detta låter dig göra visuella ändringar på dina bilder utan kodning, och du behöver inte heller bygga hover-effekter separat i WordPress-instrumentpanelen.

Här rekommenderar vi att använda CSS Hero. Detta plugin låter dig redigera nästan alla CSS-stilar på din WordPress-webbplats med en visuell redigerare. Det kommer också med inbyggda hover-effekter som du kan applicera på bilder med ett knapptryck.

Det första du behöver göra är att installera och aktivera CSS Hero-pluginet. För mer information om hur du installerar ett plugin, se vår guide om hur man installerar ett WordPress-plugin.

När pluginet är installerat måste du klicka på knappen 'Fortsätt till produktaktivering'.

Detta tar dig till CSS Hero-webbplatsen, där du kan logga in på ditt konto och hämta en licensnyckel. Följ helt enkelt instruktionerna på skärmen, så omdirigeras du tillbaka till din webbplats med några få klick.

Öppna sedan sidan eller inlägget som innehåller bilden du vill animera. Klicka sedan på ‘CSS Hero’ i WordPress adminfält.

Detta öppnar den sidan eller inlägget i CSS Hero-redigeraren.

Här öppnar ett klick på valfritt innehåll en panel med alla inställningar du kan använda för att anpassa innehållet. Med det sagt, klicka bara för att välja en bild.

I menyn till vänster, välj fliken 'Snippets'.

Klicka sedan på 'Hovringseffekter'. Du kommer nu att se alla olika CSS-effekter.

För att förhandsgranska en effekt, håll bara muspekaren över dess blå knapp i menyn till vänster.

När du hittar en effekt du vill använda, klickar du helt enkelt på 'Använd'.

Viktigt: Som standard kommer CSS Hero att tillämpa denna hover-effekt på varje bild på sidan. Detta är utmärkt för att skapa en enhetlig stil, men om du bara vill animera en enskild, specifik bild, kan en av de andra plugin-metoderna i den här guiden vara mer lämplig.

För att göra denna ändring live, klicka på knappen ‘Spara & Publicera’.

Vanliga frågor om bild-hover-effekter

Efter att ha hjälpt tusentals WordPress-användare har vi hört nästan alla frågor som finns om att lägga till interaktiva element på en webbplats. Här är några av de vanligaste vi får om bild-hover-effekter.

Fungerar bild-hover-effekter på mobila enheter?

Hover-effekter är designade för muspekare, så de fungerar inte på pekenheter som smartphones och surfplattor. På mobilen kommer bilden vanligtvis bara att visa sitt standardläge utan någon animation.

Vissa plugins erbjuder fallback-alternativ, som att utlösa en animation vid första tryckningen. På grund av detta rekommenderar vi alltid att du kontrollerar dina sidor på en smartphone eller surfplatta för att se exakt hur dina bilder kommer att visas för mobilbesökare.

Detta säkerställer en bra upplevelse för alla, oavsett vilken enhet de använder! 👍

Kommer bild-hover-effekter att sakta ner min webbplats?

De flesta moderna hover-effekter skapas med CSS, vilket är mycket lättviktigt och effektivt. När du använder ett kvalitetsplugin bör dessa effekter inte ha någon märkbar påverkan på din webbplats hastighet eller prestanda.

Kan jag lägga till bild-hover-effekter utan ett plugin?

Ja, det är möjligt att lägga till bild-hover-effekter genom att skriva din egen anpassade CSS-kod. Denna metod kräver dock teknisk kunskap och innebär att redigera din temas filer, vilket kan vara riskabelt för nybörjare.

Att använda ett plugin är den säkraste och enklaste metoden för de flesta användare, eftersom det hanterar all kod åt dig.

Lär dig fler sätt att använda och hantera bilder i WordPress

Bildpekareffekter är inte det enda sättet att lägga till mer visuellt intresse på din webbplats. Här är andra handledningar du kan läsa om att använda bilder i WordPress:

• Hur man skapar interaktiva bilder i WordPress
• Hur man förstorar bilder vid klick i WordPress (3 enkla metoder)
• Hur man visar före- och efterbilder i WordPress (med slide-effekt)
• Hur man lägger till ett galleri i WordPress med en lightbox-effekt
• Hur man lägger till Instagram-liknande fotofilter i WordPress (steg för steg)
• Hur man använder AI för att generera bilder i WordPress
• Hur man lägger till animerade GIF-filer i WordPress (på RÄTT sätt)

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till bildeffekter vid hovring i WordPress. Du kanske också vill se våra experters val av de bästa WordPress-sliderpluginsen och vår lista över källor för gratis bilder i public domain och CC0-licensierade.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.