Hur tona bilder pÄ musöverföring i WordPress

Hur tona bilder pÄ musöverföring i WordPress

Bilder ökar anvÀndarnas engagemang pÄ webbplatser. Det Àr dÀrför du behöver optimera bilder, lÀra dig hur du lÀgger till vackra bildgallerier och ÄtgÀrda eventuella bildproblem pÄ din webbplats. Det finns mÄnga sÀtt att göra dina bilder utmÀrkta. En av dem anvÀnder en blekningseffekt pÄ bilder. I den hÀr artikeln kommer vi att visa dig hur du tona ut bilder vid musöverföring i WordPress.

I grund och botten nÀr anvÀndaren tar musen över en bild pÄ din webbplats kommer den att blekna nÄgot. Se skÀrmdumpens exempel nedan:

Först visar vi dig hur du lÀgger till enkel blekningseffekt pÄ bilder i dina WordPress-inlÀgg. Vi kommer att anvÀnda CSS för det. Allt du behöver göra Àr att kopiera och klistra in följande kod i ditt temas eller underordnade temas stil.css-fil.


.post img:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}

Detta CSS-kodavsnitt pÄverkar alla bilder som visas i WordPress-inlÀgg. Det finns dock en liten glitch i detta utdrag. NÀr en anvÀndare tar musen över till en bild byter den omedelbart opacitet. Det hÀr kÀnns lite grovt, eller hur? LÄt oss göra det lite mjukare genom att lÀgga till CSS-övergÄngsregler.


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

Du kan ocksÄ vÀnda denna effekt genom att stÀlla in en lÀgre standardgenomskinlighet för dina bilder och sedan lÀttare till full opacitet som ger en glödande effekt. Allt du behöver göra för det Àr att anvÀnda följande CSS i ditt formatmall:


.post img {
opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
}
.post img:hover{
opacity:1.0;
filter:alpha(opacity=100); /* 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;
}

Vissa av vÄra anvÀndare kanske inte vill lÀgga till den hÀr effekten i alla bilder i sina inlÀgg. Vad sÀgs om bara bilder eller posta miniatyrer? För att bara lÀgga till denna effekt i mina inlÀggsminiatyrer kan du anvÀnda standardklassen .wp-post-image som genereras av WordPress för utvalda bilder. Byt bara .post img: svÀva med img.wp-post-image: svÀva.

Du kan justera opacitetsvÀrdet eller övergÄngsfördröjningstiden för att fÄ önskad effekt. Vi hoppas att den hÀr artikeln hjÀlpte dig att lÀra dig hur du tona ut bilder vid musöverföring i WordPress. LÄt oss veta vad du tycker genom att lÀmna din feedback och frÄgor i kommentarerna nedan. Glöm inte att följa oss pÄ Twitter.