CSS – Set Image/img Opacity with Mouseover Effect

Use the following code to set image opacity.

.imgClass {
  opacity: 0.5;
  filter: alpha(opacity=50);
}


 

For normal browser, the opacity attribute works very well. But for the amazing Internet Explorer, you gotta use the filter attribute.

Try the following for mouseover effect.

<html>
  <head>
    <title>Eureka!</title>
  </head>
  <body>
    <div>
      <img src="http://www.google.com.hk/images/logo_sm.gif" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
    </div>
  </body>
<html>

 

Done =)

Reference: CSS Image Opacity / Transparency

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.