Designtips: Vit-tonad bild vid mouseover

Fått lite frågor om hur jag får den vita toningen på mina bilder i inläggen, så nu tänkte jag förklara :) 
Det enda jag har gjort är att lägga in en kod i kodmallen, eftersom jag har en vit bakgrund i mina inlägg så blir det en vit toning, annars blir bilderna egentligen genomskinliga.
 
1. Gå in i kodmallen och lägg den här koden mellan <head> och </head>.
 

<style type="text/css">
img{opacity: 1;
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;}

img:hover{opacity: 0.6;
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;}
</style>

 

2. För att ändra hur genomskinlig du vill att bilden ska bli ändrar du img:hover{opacity: 0.6; från 0,1-1,0 beroende på hur mycket du vill att det ska vara. Sen lägger du bara in koden i varje kodmall så det syns överallt på bloggen :) 


Tidigare inlägg