This is a CSS trick that will make your photos on blog or website go in gray mode when idle, when somebody move the mouse over image it glows or comes out of gray mode.
This is especially useful when you do not want any distraction created by bright images in your article post and in process make content have more visibility over images.
example of transparent image:
This is how you can achieve this
<img src=”YOUR_IMAGE_PHOTO_LINK_HERE” border=”0″ onmouseout=’this.style.opacity=0.4;this.filters.alpha.opacity=40′ onmouseover=’this.style.opacity=1;this.filters.alpha.opacity=100′ style=’opacity:0.4;filter:alpha(opacity=40)’/>
This image transparent method uses opacity property from style sheet
In above code;Firefox uses the property opacity:x for transparency, while IE uses filter:alpha(opacity=x).
For Firefox x takes value from 0.0 – 1.0. A lower value makes the element more transparent.
For IE x can take value from 0 – 100. A lower value makes the element more transparent.
We have used two different action attributes for toggling between transparency.
The onmouseover event will make image appear bright and in its normal form when mouse is hovered over it, while onmouseout will again bring image back to transparent mode when mouse is taken away from it.
You may play with opacity values and get varied results.
Tip: Opacity value of zero will make image invisible.
wow