Sunday, September 20, 2009

Displaying Images Transparent, With Mouseover Effect

How a transparent image above effect is not so difficult, that we need only use CSS Image Opacity property. But before you should also know CSS opacity property is not included in the standard CSS, which this property works well only on some modern web browsers only.

Examples of the mouseover effect to the more dim light (set directly in the picture).

onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" / />

<img src="Your Image URL" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

Examples of the mouseover effect to dim light (set directly in the picture)

onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"/ />

<img src="Your Image URL" border="1" style="opacity:1;filter:alpha(opacity=100)"

Maybe a bit hard if each image must be set one by one the value of his property, now that every partner posts directly having an effect automatically, can directly add this CSS code:

.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}

.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}

As far as I usually use the property Firefox opacity: x for tranparancy, unlike IE which uses filter: alpha (opacity = x). In Firefox opacity: x value of x can be filled with values between 0.0 -1.0, while the IE filter: alpha (opacity = x) the value of x between 0-100.


medan said...

Info yang bagus, sangat berguna

Mobile App Developers said...

Nice post, things explained in details. Thank You.

SEO Company Pitampura said...

Nice Post. All readers will definitely like this post. Looking forward to your next post.

Buy Contact Lenses Online said...

Hey keep posting such good and meaningful articles.

Post a Comment