Displaying Images Transparent, mouseover Effect

This means what? ok, than my colleagues try jelasin lengthy preview samplenya in zoomtemplate.com, if already try now point to the picture page of posts there .. nah colleagues will see the effect where the original image will be dim light or it could be vice versa from dim to bright when it passed the mouse. Perhaps the meaning is clear enough, yes, immediately wrote to the next.

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

Code mouseover effect from dim to brighter (set directly in the picture)

<img src="Save the image location 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" />

Code mouseover effects from bright to dim (set directly in the picture)

<img src="Save the image location 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 too complicated if each image must be set one by one the value of his property, now co-direct for each post having an effect this automatically, can simply 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}

To my knowledge Firefox usually uses the property opacity: x for doing tranparancy, unlike IE which uses a 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 000-100.

Related Articles