Mousover Image Effect

This is a cool CSS effect that we use to make all images that are links more obvious. by changing the opacity when mouseover occurs.

It is also a fast loading trick for SEO.

 

a:hover img {
opacity: .6;
}

Example:
Multimedia Service

How to make mouseover effects with css. No javascript needed.

 

Warning! This will make all your images that are links change when a mouseover occurs. Sometimes you may not want that. If so you will have to rename the class so it is not img. Then include the class in the link. 

How To Make a Cool Mouseover Effect with CSS


Example:

The code you need: .imgBox { width: 960px; height: 550px; background: url(http://www.hollywoodmultimediaproduction.com/images/PRODUCTION1.jpg) no-repeat; } .imgBox:hover { width: 960px; height: 550px; background: url(http://www.hollywoodmultimediaproduction.com/images/PRODUCTION3.jpg) no-repeat; }