Vit-tonade bilder vid mouseover

Det har varit några som frågat hur jag gjort så att bilderna blir vit-tonade vid mouseover. Och det är egentligen väldigt enkelt att fixa, så jag tänkte visa det nu. Egentligen blir bilderna genomskinliga, men eftersom själva bakgrunden är vit så blir bilderna vita.
1. Gå in till kodmallen och sedan lägger du in denna kod mellan <head> och </head> i alla kodmallar.
<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. Om du vill att dina bilder ska bli mer genomskinliga ändrar man img:hover{opacity: 0.6; från 0.1-1.0 beroende på hur mycket man vill att det ska vara, det är bara för dig att testa dig fram.
3. Spara, och sedan är det klart!
Hoppas ni får användning för detta! Just nu är jag i Varberg på någon sak med min mamma och lillasyster, hoppas i har haft en bra påsk.

Kommentarer

Kommentera inlägget här:

- Alla bilder på bloggen är fotade av mig, om inget annat anges.
- Jag fotar med min Canon EOS 500D och redigerar i Adobe Photoshop CS5.
- Inga foton får kopieras utan min tillåtelse!


- Jag har gjort min design själv.

Och kom ihåg att du aldrig är anonym när du kommenterar, jag kan se din ip-adress.



Namn:
Kom ihåg mig?

E-postadress: (ses bara av mig)

Hemsida/Blogg:

Din söta kommentar:

bloglovin



Trackback
Related Posts Plugin for WordPress, Blogger...