Fade In or Fade Out an Image with CSS

Simple little bit of CSS to fade out an image to 50% opacity:


img {
opacity: 1.0; /* Change this to .5 for 50% opacity */
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
img:hover {
opacity: .5;
}


Can also reverse the opacity values to get a fade in with CSS:


img {
opacity: .5; /* Change this to .5 for 50% opacity */
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
img:hover {
opacity: 1.0;
}


Play around with it more here on JSFIDDLE: http://jsfiddle.net/HuXq7/