October 1, 2012

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=60onmouseout="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 :-)




Awesome! Thanks for coming by and taking your time to read this post :) I hope you have learnt something today. Now you can share it with your friends and I'd love to hear from you too.






Related Posts and Categories


Category, , , , , ,





Comments

* Make sure your comment is genuine and comply with our commenting guidelines.

* Review your email and reply notification settings to receive replies via email.


Malinda Alahakoon said...

Good one mate. Lost of blogger think these are too geeky. But in this post you are proving it how easy to use CSS to tweak UI..

Mayura De Silva said...

Hi Malinda,


You are absolutely right about it mate :) It sounds geeky if we don't know how to. I hope people will find it's simple to follow and implement easily on their site.


Thanks for coming over and sticking your compliments in your comment mate :)


Cheers...

Brenda Lee said...

As always, great tips Mayura!

Harleena Singh said...

Nice effect Mayura!


But yes, all these CSS codes would have gone over my head, had you not explained it word by word, or pasted the details above. :)


I guess if I hadn't visited your post today, I might not have learnt about this way and carried on with the usual. I think more than the main image, it can be used on the side images or advertisements, or even the social buttons we all use - isn't it?


Thanks for sharing and letting us know about yet another wonderful effect. :)

Mayura De Silva said...

Hi Brenda,


Thank you dear :) I know you love to accept changes. Hope you will be creative with this effect too ;)


Thanks for commenting dear :)


Cheers...

Mayura De Silva said...

Hi Harleena,


You got it right dear. That's best for advertisements, banners, follow images or such icons. It can grab attention of users with a simple effect :) Feels like animating 'em, no? Hope you will make a change with it :)


It's my objective to be simple as much as possible to help learn people what I have learnt already dear :) That's why I guess people visit here and I keep posting stuff I've learnt.


Thanks for your comment and compliments dear :)


Cheers...

Lisa Buben said...

Nice tutorial Mayura! I like how you really show each step - steps I need to be to follow along. What type of images would you recommend this for?

Mayura De Silva said...

Hi Lisa,


Actually you can use it for any type of image on your blog or website :) It's perfect for banners, badges and icons such as follow buttons to catch user attention as they move their mouse pointer over the images. But why not, sometimes it can be useful for post images too. Who knows, call in creativity inside you :)


Thanks for your comment and compliments dear :)


Cheers...

jithin said...

Nice post brother.

Can you share how to add share button like you !

Thanks

Mayura De Silva said...

Hi Jithin,


You're welcome mate :) Follow buttons are just images enclosed with links to relevant profiles. HTML tags only. If you're not familiar with HTML, learn at W3Schools website.


Thanks for commenting :)


Cheers...

Jan Bierens said...

Nice post and easy to follow. Step by step instructions work well and - like I always say - a picture says more that a thousand words.
This whole 'How to' series is getting pretty awesome. Keep up the good work, Mayura.

Jeevan Jacob John said...

This used to be easier in Blogger :P


Well, in blogger, they have it as in-built I think (if my memory is right!).


There should be a plugin for it, don't you think? (Ah, or I could memorize this code and use it every time and avoid the increase in load time due to the addition of a new plugin).


I am planning to use images for my new blog (well, I am still thinking about it; I want to use it in a different manner).

Mayura De Silva said...

Hi Jan,


I agree mate ~ "A picture says more than a thousand words" :) I hope you will make use of effects creatively on your blog too. Eyes on yours ;)


Thanks for your comment and wonderful compliments Jan :) I always appreciate the love I'm getting from my community and first time visitors too.


Cheers...

Mayura De Silva said...

Hi Jeevan,


I guess Blogger quite easy for this mate :) Plugin? You mean WordPress, right? I think there is a plugin for this one on WordPress, but it's better always follow the simplicity instead of killing performance with plugins.


The better we know basics, the better we can utilize ;) We should be learning not to use plugins, but behind the scenes, no? I hope your new blog will come up with a brand new idea and a theme.


Thanks for coming over and sharing your ideas Jeevan :)


Cheers...

Michael Hazell said...

Well, plugins can make page speeds faster, but installing a widget with only a few lines of CSS code should make minimal impact.

Mayura De Silva said...

Absolutely Michael :) As we improve our blog with different useful plugins, page load time is a fact where we have to stop and go back through plugins again. So CSS would be better in that case :)


Thanks for sharing your views mate :)


Cheers...