Hur man tonar ut bilder vid muspekaren i WordPress (enkelt & lätt)

Har du någonsin velat lägga till lite gnista till din webbplats bilder? Vi pratar om en liten, professionell touch som gör att din webbplats känns mer interaktiv utan att vara distraherande.

På WPBeginner har vi funnit att en enkel blekningseffekt vid muspekaren är en perfekt lösning. Det är en subtil animation som försiktigt uppmuntrar besökare att engagera sig i ditt visuella innehåll.

Denna lilla justering kan göra stor skillnad för din webbplats övergripande känsla, och den är förvånansvärt enkel att ställa in. Du behöver inte vara en kodexpert för att få det gjort.

I den här guiden visar vi dig exakt hur du lägger till bildövergångseffekten vid muspekaren i WordPress.

Varför blekna bilder vid muspekaren i WordPress?

Animationer är ett enkelt sätt att göra din webbplats mer intressant och kan till och med dra besökarens uppmärksamhet mot din starts mest viktiga innehåll, som din webbplatslogotyp eller en call to action.

Det finns många olika sätt att använda CSS-animationer i WordPress, men att lägga till en hover-effekt på bilder är särskilt effektivt. Övergångsanimationen innebär att dina bilder långsamt kommer att visas eller försvinna när besökare hovrar över dem.

Detta uppmuntrar folk att interagera med dina bilder och kan till och med lägga till ett berättande element på sidan. Till exempel kan olika bilder tona in och ut medan besökaren rör sig runt på sidan.

Till skillnad från vissa andra animationer är blekningseffekten vid muspekaren subtil, så den kommer inte att negativt påverka besökarens läsupplevelse eller någon bildoptimering du har gjort.

Med det sagt, låt oss visa dig hur du lägger till en toning till dina bilder vid muspekaren i WordPress. Använd helt enkelt snabblänkarna nedan för att hoppa direkt till den metod du vill använda:

• Metod 1: Lägga till bildblekning vid muspekaren på alla WordPress-bilder
• Metod 2: Lägga till bildblekningsanimationer på enskilda sidor
• Metod 3: Lägga till bildblekningsanimationer för utvalda bilder
• Vanliga frågor (FAQ)
• Ytterligare resurser för bildeffekter & hantering

Metod 1: Lägga till bildblekning vid muspekaren på alla WordPress-bilder

Det enklaste sättet att lägga till en blekningseffekt på alla dina bilder är att använda kostnadsfria WPCode-pluginet. Det är det mest kraftfulla och användarvänliga pluginet för kodavsnitt för WordPress, och det låter dig lägga till anpassad kod utan att behöva redigera din temas filer.

Detta är mycket säkrare eftersom pluginet hjälper till att förhindra misstag som kan orsaka vanliga WordPress-fel. För mer information om alla dess funktioner kan du läsa vår kompletta WPCode-recension.

Experttips: På WPBeginner använder vi WPCode för att hantera alla anpassade kodavsnitt över vår portfölj av webbplatser. Det är ett pålitligt sätt för oss att lägga till funktionalitet och göra justeringar säkert utan att någonsin redigera en temas functions.php-fil direkt.

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

Efter aktivering, gå till Code Snippets » Add Snippet.

Här ser du alla färdiga WPCode-kodavsnitt som du kan lägga till på din webbplats. Dessa inkluderar ett kodavsnitt som låter dig inaktivera kommentarer helt, ladda upp filtyper som WordPress vanligtvis inte stöder, inaktivera bilagesidor, och mycket mer.

Håll bara muspekaren över ‘Lägg till din anpassade kod’ och klicka sedan på ‘+ Lägg till anpassad kodsnutt’ när den visas.

För att lägga till anpassad CSS i WordPress, måste du välja 'CSS-avsnitt' som kodtyp från listan med alternativ som visas på skärmen.

Sedan, på nästa sida, skriv in en titel för kodavsnittet.

Detta kan vara vad som helst som hjälper dig att identifiera utdraget i WordPress-instrumentpanelen.

I kodredigeraren, lägg till följande kodavsnitt:

img:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

Den här kodsnutten kommer att tona ut varje bild i 2 sekunder när användaren för muspekaren över den. För att bilden ska tona ut långsammare, ersätt helt enkelt '2s ease' med ett högre nummer. Om du vill att bilden ska tona ut snabbare, använd då '1s ease' eller mindre.

Du kan också göra 'opaciteten' högre eller lägre genom att ändra raden opacity:0.6.

Om du ändrar något av dessa nummer, se till att du ändrar dem i alla egenskaper (webkit, moz, ms och o) så att blekningseffekten ser likadan ut i alla webbläsare.

När du är nöjd med kodavsnittet, scrolla ner till avsnittet 'Infogning'. WPCode kan lägga till din kod på olika platser, till exempel efter varje inlägg, endast på frontend, eller endast i admin.

För att lägga till en övergångseffekt på alla dina bilder, klicka på 'Automatisk infogning' om det inte redan är valt. Öppna sedan rullgardinsmenyn 'Plats' och välj 'Hela webbplatsens sidhuvud'.

Därefter är du redo att skrolla till toppen av skärmen och klicka på växlingsknappen 'Inaktiv' så att den ändras till 'Aktiv'.

Klicka slutligen på ‘Spara kodavsnitt’ för att göra CSS-kodavsnittet live.

Nu, om du för muspekaren över någon bild på din WordPress-webbplats, kommer du att se fade-effekten i aktion.

Metod 2: Lägga till bildblekningsanimationer på enskilda sidor

Att använda en fade-effekt för varje enskild bild kan bli distraherande, särskilt om du har ett fotogalleri på din webbplats, en lagerfotoaffär eller någon annan webbplats som har många bilder.

Med det i åtanke kanske du vill använda blekningseffekter endast på en specifik sida eller ett specifikt inlägg.

De goda nyheterna är att WPCode låter dig skapa egna kortkoder. Du kan placera denna kortkod på vilken sida som helst, och WordPress kommer att visa fade-effekter endast på den sidan.

För att göra detta, skapa helt enkelt ett anpassat kodutdrag och lägg till övergångsanimationskoden enligt samma process som beskrivs ovan. Klicka sedan på knappen 'Spara utdrag'.

Därefter, scrolla till sektionen 'Infogning', men välj den här gången 'Kortkod'.

Detta skapar en kortkod som du kan lägga till på vilken sida, inlägg eller widget-redo område som helst.

Därefter, fortsätt och gör utdraget live genom att följa samma process som beskrivs ovan.

Du kan nu gå till vilken sida, inlägg eller widget-redo område som helst och skapa ett nytt block för 'Kortkod'. Klistra sedan helt enkelt in WPCode-kortkoden i det blocket.

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

När det är gjort, klicka antingen på knappen 'Uppdatera' eller 'Publicera' för att göra kortkoden live. Du kan sedan besöka den sidan, sidan eller widget-redo området för att se fade-vid-muspekaren-effekten.

Metod 3: Lägga till bildövergångsanimationer till utvalda bilder

Ett annat alternativ är att lägga till toningseffekter till dina utvalda bilder eller miniatyrer. Dessa är inläggets primära bilder.

Genom att tona ut utvalda bilder vid muspekaren kan du göra din webbplats mer iögonfallande och engagerande utan att animera varje enskild bild på din WordPress-blogg eller webbplats.

För att lägga till en toningseffekt till dina inläggsminiatyrer, skapa helt enkelt ett nytt anpassat kodavsnitt genom att följa samma process som beskrivs ovan.

Lägg dock till följande kod i redigeraren den här gången:

img.wp-post-image:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

Rulla sedan till rutan 'Infogning' och välj 'Automatisk infogning'.

Öppna sedan menyn ‘Plats’ och välj ‘Hela webbplatsens sidhuvud.’

Efter det kan du fortsätta och göra kodavsnittet live genom att använda samma process som beskrivs ovan.

Nu kan du föra muspekaren över vilken utvald bild som helst för att se toningseffekten i aktion.

Om du vill lägga till ännu fler bildeffekter vid muspekaren, se vår guide om hur man lägger till bildeffekter vid muspekaren i WordPress.

Vanliga frågor (FAQ)

Här är svar på några av de vanligaste frågorna vi får om att lägga till bildeffekter vid hovring i WordPress.

Kommer en blekningseffekt att sakta ner min webbplats?

Nej, denna CSS-baserade blekningseffekt bör inte märkbart sakta ner din webbplats. Koden använder enkla CSS-övergångar, som är mycket lätta och optimerade av moderna webbläsare.

Den här metoden är mycket mer effektiv än att använda JavaScript eller stora animationsbibliotek för en så enkel effekt.

Hur applicerar jag fade-effekten på en enskild, specifik bild?

För att rikta in dig på en enskild bild kan du tilldela den en anpassad CSS-klass. Välj först bildblocket i redigeraren och hitta panelen 'Avancerat' i blockinställningarna till höger.

I fältet 'Ytterligare CSS-klass(er)' lägger du till ett unikt namn som custom-fade-image. Ändra sedan ditt WPCode-utdrag för att specifikt rikta in dig på den här klassen, så här:
img.custom-fade-image:hover { ... }.

Fungerar toningseffekten vid muspekaren på mobila enheter?

'Muspekaren' eller 'hover'-åtgärden är specifik för datoranvändare med en muspekare. Denna effekt kommer inte att utlösas på pekenheter som smartphones eller surfplattor eftersom det inte finns någon pekare att föra över bilderna.

Koden kommer dock inte att orsaka några problem på mobilen. Dina bilder kommer helt enkelt att visas normalt utan blekningseffekten.

Kan jag använda andra animationseffekter än toning?

Ja, absolut. Toningen är bara en av många möjligheter du kan uppnå med CSS.

Du kan skapa effekter som zoom, glidning, gråskala eller applicera överlägg. För fler idéer och kodexempel, se vår detaljerade guide om hur man lägger till bildeffekter vid hovring i WordPress.

Ytterligare resurser för bildeffekter & hantering

En enkel blekning är en bra början, men det finns många andra sätt att göra dina bilder mer engagerande. Om du vill utforska mer avancerade alternativ, här är några av våra andra guider om bildeffekter och hantering:

• Hur man lägger till Instagram-liknande fotofilter i WordPress (steg för steg)
• Hur man visar före- och efterbilder i WordPress (med slide-effekt)
• Hur man lägger till ingen högerklickning på WordPress-bilder
• Hur man skapar interaktiva bilder i WordPress
• Hur man enkelt lägger till interaktiva 360-gradersbilder i WordPress

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du tonar ut bilder vid muspekaren i WordPress. Du kanske också vill se vår guide om hur du organiserar WordPress-filer i mappar i mediebiblioteket och våra experters val av bästa plugins och verktyg för utvalda bilder i WordPress.

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.