Hur man tonar ut images vid mouseover i WordPress (enkelt och smidigt)

Även om det kan gillas som en liten sak, är en av de saker vi ibland lägger till på våra webbplatser i WordPress en enkel animering som tonar in eller ut när en användare för musen över en bild. Det är ett subtilt men ändå effektivt sätt att göra våra webbplatser mer engagerande och interaktiva.

Vi har upptäckt att dessa små visuella signaler kan göra stor skillnad för hur besökare interagerar med vårt innehåll. Det handlar eller ej bara om att göra webbplatsen snyggare – dessa animationer kan faktiskt uppmuntra besökarna att utforska mer av vårt innehåll.

I den här artikeln visar vi dig hur du lägger till denna uttonade bildeffekt vid mouseover i WordPress.

Varför tona ut images vid muspekare i WordPress?

Animationer är ett enkelt sätt att göra din webbplats mer intressant och kan till och med rikta besökarens uppmärksamhet mot sidans viktigaste content, t.ex. din logga 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 till images är särskilt effektivt. Fade-animationen innebär att dina images långsamt kommer att dyka upp eller försvinna när besökare hoverar över dem.

Detta uppmuntrar människor att interagera med dina images och kan till och med add to ett storytelling-element till page. Till exempel kan olika images tonas in och ut när besökaren rör sig runt på page.

Till skillnad från vissa andra animationer är fade image på mouseover-effekten subtil, så den kommer inte att påverka besökarens läsupplevelse negativt eller någon image-optimering som du har gjort.

Med det sagt, låt oss visa dig hur du lägger till en uttoning till dina images vid mouseover i WordPress. Använd bara snabblänkarna under för att hoppa direkt till den metod du vill använda:

Metod 1: Lägga till Image Fade på Mouseover till alla WordPress Images

Det enklaste sättet att add a fade effect to all your images är genom att använda WPCode. Detta gratis plugin tillåter dig att enkelt add custom code i WordPress utan att behöva edit dina theme filer.

Med WPCode kan även Beginnare editera koden på sin website utan att riskera misstag och stavfel som kan orsaka många vanliga WordPress error.

Det första du behöver göra är att installera och aktivera det gratis pluginet WPCode. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Efter aktivering, head över till Code Snippets ” Add Snippet.

Here, you will see all the ready-made WPCode snippets you can add to your site. Dessa inkluderar ett snippet som allow you att helt inaktivera comments, upload file types that WordPress doesn’t usually support, disable attachment pages, and much more.

För bara musen över ”Add Your Custom Code” och klicka sedan på ”+ Add Custom Fragment Kodu” när det visas.

Till att börja med skriver du in en titel för det anpassade code snippet. Det kan vara vad som helst som hjälper dig att identifiera snippet i WordPress dashboard.

För att add to custom CSS till WordPress, öppna ”Code Type” dropdown och välj ”CSS Snippet”.

I code editor, add to följande code snippet:

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;
}

Detta code snippet kommer att tona ner varje image i 2 sekunder när användaren hoverar med musen över den. Om du vill att imagen ska blekna långsammare ersätter du helt enkelt ’2s ease’ med ett högre tal. Om du vill att bilden ska blekna snabbare använder du ’1s ease’ eller mindre.

You can also make the ”opacity” higher or lower by changing the opacity:0.6 line.

Om du ändrar någon av dessa siffror ska du se till att ändra dem för alla egenskaper (webkit, moz, ms och o) så att uttoningseffekten ser likadan ut i alla webbläsare.

När du är nöjd med snippet, rulla till ”Insertion” section. WPCode kan add your kod till olika locations, till exempel efter varje post, endast front-end eller endast admin.

För att add to en fade-effekt till all your images, click on ”Auto Insert” if it isn’t already selected. Öppna sedan dropdown-menyn ”Location” och välj ”Site Wide Header”.

Efter det är du redo att rulla högst upp på vyn och klicka på ”Inaktiverad” toggle så att den ändras till ”Aktiv”.

Slutligen klickar du på ”Save Snippet” för att göra CSS-snippet live.

Om du nu hoverar med musen över en image på din WordPress website, ser du fade-effekten i action.

Metod 2: Lägga till Image Fade Animations till enskilda sidor

Att använda en blekningseffekt för varje enskild bild kan bli distraherande, särskilt om du har ett galleri på din webbplats, en butik med stockfoton eller någon annan webbplats som har många bilder.

Med detta i åtanke kanske du vill använda blekningseffekter endast på en specifik page eller post.

Den goda nyheten är att WPCode allow you att skapa customize shortcodes. Du kan placera denna shortcode på valfri page och WordPress kommer att visa fade-effekter endast på den page.

För att göra detta skapar du helt enkelt ett custom code snippet och add to fade animationskoden enligt samma process som beskrivs ovan. Klicka sedan på knappen ”Save snippet”.

Därefter rullar du till section ”Insertion”, men den här gången väljer du ”Shortcode”.

Detta skapar en shortcode som du kan add till en page, post eller widget-ready area.

Följ det och gör snippet live genom att följa samma process som beskrivs ovan.

Du kan nu gå till valfri page, post eller widget-ready area och skapa ett new ”Shortcode”-block. Sedan klistrar du helt enkelt in WPCode shortcode i det blocket.

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

När det är gjort klickar du antingen på knappen ”Update” eller ”Publicera” för att göra shortcoden live. You can then visit that page, page, or widget-ready area to see the fade-on mouseover effect.

Metod 3: Lägga till Image Fade Animations till Featured Images

Ett annat alternativ är att lägga till fade animationer till dina utvalda bilder eller inläggsminiatyrer. Dessa är inläggets primära bilder.

Genom att tona ut featured images vid mouseover kan du göra din site mer iögonfallande och engagerande utan att animera varje enskild image på din WordPress blogg eller website.

För att add a fade animation till dina inläggsminiatyrer skapar du helt enkelt ett nytt custom code snippet som följer samma process som beskrivs ovan.

Men den här gången addar du följande kod till Editorn:

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;
}

Därefter rullar du till boxen ”Insertion” och väljer ”Auto Insert”.

Öppna sedan dropdown-menyn ”Location” och välj ”Site Wide Header”.

Efter det kan du gå vidare och göra code snippet live med samma process som beskrivs ovan.

Nu kan du hovera musen över valfri featured image för att se fade-animationen i action.

Om du vill lägga till ännu fler effekter för mouseover på bilder kan du läsa vår guide om hur du lägger till effekter för hovering på bilder i WordPress.

Bonuseffekter att lägga till i dina WordPress-bilder

Fade-effekter är ett roligt sätt att göra images mer intressanta, men det finns många fler sätt att använda animationer i WordPress. Du kan till exempel använda flipbox-animationer för att avslöja text när en visitor hoverar över en image eller zoomeffekter så att användare kan utforska en bild mer detaljerat.

Här är andra intressanta effekter som du kan lägga till i dina bilder:

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

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du bleknar bilder vid mouseover i WordPress. Du kanske också vill se vår przewodnik om hur du organiserar WordPress-filer i mappar i mediabiblioteket och våra expertval av de bästa tilläggen och verktygen för utvald bild för WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.