Create Transparent Effect for Your Images on Mouse Hover

Have you been using images on your blog or website? I believe whether you are a blogger or a webmaster, you are familiar with the usage of images on a site. There is a higher tendency that visitors spend more of their time on pages with images or such media, instead of text-only pages. Isn't it obvious that our eyes go straight to images and styles on a web page as we scan through the page? Now think, where would you use images on your blog or website? Can be anywhere - in posts, on header, on sidebar or even on footer. They can be banners, sponsor advertisements, follow buttons, site header or such common elements. Rather than displaying them with a static motion, wouldn't you love to add a cool effect for such images to improve visibility and grab more attention of your visitors?

Be Stylish

You would love to alter the way how images on your site respond to visitor's gestures. I'm not talking about all of images, but you can apply this effect easily for images where you need it to apply. You almost know about what effect we gonna learn about. It's Transparency Effect, which helps you to make your images more transparent by changing image attributes. But here I'm not gonna let you know about just changing transparency of your static images. What I'm focused on is changing the transparency of an image as and when visitor's mouse pointer comes over to your image, and as the mouse pointer leave the image it will change back to the transparency level it had. Ohw... Don't worry, it doesn't affect on your page performance or load time. Well, let me show you how it works, so you can decide where to apply on your site.

Now... They are Just Images

                 

Did you notice? If you didn't, just hover your mouse pointer over the image on left. Wonderful, right? Wha... What... Nothing happened over there? Alright. Now hover over the image on right. Now, that's what I was talking about. If you couldn't imagine what I was talking about, now you can see it yourself. As your mouse pointer enter into image area, its transparency changes. And when your mouse pointer leave out, the transparency level comes back to default value. Interesting effect, isn't it? Seems like it's animating. Let's learn how to apply that effect for images on your site too. Here I'm just teaching you how to apply transparency effect, but you can be very creative with this effect on your blog or website, and impress your visitors with different applications of transparency levels.

Steps:

1. First off, you should be able to access the HTML code for your images that you intend to apply transparency effect. Locate the HTML code for image on your site. HTML code for an image tag is similar as demonstrated here - <img src=".../image.jpg" alt="Red Rose" />

2. Once you located your preferred image HTML tag, insert following attributes into the image tag.

onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" onmouseout="this.style.opacity=1.0;this.filters.alpha.opacity=100"

For example, if your image tag is,

<img src=".../image.jpg" alt="Red Rose" />

Then this is how it looks like after inserting above attributes,

<img src=".../image.jpg" alt="Red Rose" onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" onmouseout="this.style.opacity=1.0;this.filters.alpha.opacity=100" />


Color Indication Information:

   - Image Transparent Property compatible with Modern Web Browsers

This attribute is use by modern web browsers to detect the transparency of an image on a web page. Define the transparency value as you prefer. This attribute holds values from 0 to 100.

   - Image Transparent Property compatible with Older Internet Explorer Browsers

This attribute is use by older Internet Explorer browsers to determine the transparency of an image displayed on a web page. Its value range start from 0.0 and maximum value is 1.0. You can use any value in between that value range for browsers to detect opacity value.

   - Opacity of the Image, when Mouse Pointer is over the Image

Specify the opacity or transparency value you prefer to have for image when the mouse pointer is over. Make sure to specify values within correct range.

   - Opacity of the Image, when Mouse Pointer is Away from the Image Area

Specify the transparency value you prefer to have for image, when user's mouse pointer not over the image. Basically, it's the transparency value for image when the image has no user interaction.


3. Now save the changes made to images and hover over images on your site to see the transparency effect you applied on them.


Enjoy :-)