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

Vill du tona ut images vid mouseover i WordPress?

En enkel animering som tonar in eller ut när en användare för musen över en image kan göra din site mer engagerande. Det uppmuntrar också besökarna att interagera med ditt content, vilket kan få dem att stanna kvar längre på din site.

I den här artikeln visar vi dig hur du lägger till en uttonad image-effekt 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.

Bara hovera musen över ”Add Your Custom Code” och klicka sedan på ”Use snippet” när det dyker upp.

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 image kan bli distraherande, särskilt om you run en fotowebbplats, en store med stockfoton eller någon annan site som har många images.

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 add to fade animationer till dina featured images eller inläggsminiatyrer. Dessa är postens primära images, och de visas ofta bredvid heading på din home page, archives pages och andra viktiga areas på din website.

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.

Bonus: Animera alla images, texter, knappar och mer med SeedProd

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.

Om du vill prova olika effekter har SeedProd över 40 animationer som du kan add to images, text, knappar, videoklipp och mycket mer. Du kan till och med animera hela sections och columns med bara några clicks.

I SeedProd Editor klickar du helt enkelt på det content du vill animera och väljer sedan tabben ”Advanced” i menyn till vänster.

You can then go ahead and click to expand the ’Animation Effects’ section.

Därefter är det bara att välja en animering från ”Entrance Animation” dropdown, inklusive ett brett utbud av olika fade-effekter.

För mer information, vänligen se vår guide om hur du skapar en landing page med WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du bleknar images vid mouseover i WordPress. Du kanske också vill se vår guide om hur du väljer den bästa programvaran för webbdesign och våra expertval av de bästa tilläggen för popup i 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.