Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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).

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

<img src="Your Image URL" 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" />

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

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

<img src="Your Image URL" border="1" style="opacity:1;filter:alpha(opacity=100)"
onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1;this.filters.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.




This post first appeared on Blogspot Scripts, please read the originial post: here

Share the post

Displaying Images Transparent, With Mouseover Effect

×

Subscribe to Blogspot Scripts

Get updates delivered right to your inbox!

Thank you for your subscription

×