Multi
Multi
[CSS Snippet] Creating Image Opacity without Two Images
Topic Started: Thursday, 5. January 2012, 14:50 (969 Views)
davadude
Member Avatar
Ego Sum Promptus
Creating image opacity with only one image

These days, many people enjoy using a slight change in opacity (usually .2-.4 value) to make a nice hover effect for images. The starting image could be an icon, for example, leading you to the video channel or the social network sites of the website or company. However, often, there forums or websites use two or more images to change the opacity. Not only does this increase site loading times, force a load before the image changes, and look bad, it is also fully obsolete. Using a small CSS trick, an image or background can have the opacity manipulated. It only takes 2 lines of code to do so!

Step 1: Finding the element and preparing it
First of all, find the image or item you wish to manipulate. Make sure to give it a "div" or create a generic div. For the purpose of this tutorial, our "div" will be FOO, and we will have a link hiding underneath our image. If you do not want a link, remove the "a".

Step 1
 

#FOO a {
background:url(imageneedingopacity.gif) no-repeat center;
}

#FOO a:hover {
}

Step 2: Adding in the opacity for the original image
Now, we will add the opacity regulators. All major browsers support this, although internet explorer is still fairly glitchy with it. Therefore, for internet explorer, we will use a filter that re-creates this effect, instead.

Step 2
 

#FOO a {
background:url(imageneedingopacity.gif) no-repeat center;
opacity:0.6;
filter:alpha(opacity=60);
}

#FOO a:hover {
}

Step 3: Adding the hover effect
Now that we have manipulated the standard image, you can see nothing happens on voice over, but the image looks dull-ish. Now, let us add the effect to make it fully stand out upon a hover. Not that 1 and 100 are the default values of your image, or what it looks like in a image editor, for example.

Step 3
 

#FOO a {
background:url(imageneedingopacity.gif) no-repeat center;
opacity:0.6;
filter:alpha(opacity=60);
}

#FOO a:hover {
opacity:1;
filter:alpha(opacity=100);
}


Congratulations, you have now manipulated your hover effect with only one image or background! Please know this is simple CSS 3, I do not own it, nor does anyone own it. You are free to use it in any of your projects without any note to myself or anyone else, this is a open and free piece of work!


Please don't rip this tutorial. Tutorial made by davadude. Based on CSS and tricks from the W3 standard.
Off
Profile
Quote
Top
 
Aidan
Member Avatar
Level 12
I had no idea the opacity property was a CSS3 property until just now. Ha ha, I guess you learn something new everyday. :P
Off
Profile
Quote
Top
 
Wyrlor1494
Member Avatar
Level 4
I remember doing this when CSS3 was first coming to be the standard :3 Very nicely written, great job writing it :3
Posted Image
Posted ImagePosted ImagePosted Image
Off
Profile
Quote
Top
 
davadude
Member Avatar
Ego Sum Promptus
DaPizzaMan
Thursday, 5. January 2012, 22:23
I had no idea the opacity property was a CSS3 property until just now. Ha ha, I guess you learn something new everyday. :P


Haha, trust me, it's quite new, but it works well!

Wyrlor1494
Thursday, 5. January 2012, 23:05
I remember doing this when CSS3 was first coming to be the standard :3 Very nicely written, great job writing it :3


Thank you, was it easy to follow?


Off
Profile
Quote
Top
 
Lewis.
Member Avatar
Awesomesauce.
Very easy to follow and kudos for throwing something in there for IE too. :)

Posted Image

Posted Image
Off
Profile
Quote
Top
 
davadude
Member Avatar
Ego Sum Promptus
Lewis.
Friday, 6. January 2012, 09:03
Very easy to follow and kudos for throwing something in there for IE too. :)
IE is not bad with opacity, it's just that they coded it as a filter, so you manipulate that. Thanks Lewis!
Off
Profile
Quote
Top
 
Lewis.
Member Avatar
Awesomesauce.
davadude
Friday, 6. January 2012, 10:38
Lewis.
Friday, 6. January 2012, 09:03
Very easy to follow and kudos for throwing something in there for IE too. :)
IE is not bad with opacity, it's just that they coded it as a filter, so you manipulate that. Thanks Lewis!
What I meant is that it's easy to forget about IE when all other major browsers simply accept 'opacity'.

With other styling, it's not uncommon to use a prefix, such as '-moz-' or '-o-', but it's not necessary with 'opacity'. I often find myself forgetting all about IE, particularly when it comes to opacity.

Posted Image

Posted Image
Off
Profile
Quote
Top
 
davadude
Member Avatar
Ego Sum Promptus
Lewis.
Friday, 6. January 2012, 11:16
davadude
Friday, 6. January 2012, 10:38
Lewis.
Friday, 6. January 2012, 09:03
Very easy to follow and kudos for throwing something in there for IE too. :)
IE is not bad with opacity, it's just that they coded it as a filter, so you manipulate that. Thanks Lewis!
What I meant is that it's easy to forget about IE when all other major browsers simply accept 'opacity'.

With other styling, it's not uncommon to use a prefix, such as '-moz-' or '-o-', but it's not necessary with 'opacity'. I often find myself forgetting all about IE, particularly when it comes to opacity.
Ah, right, apologies. I've been somewhat of a windows fanboy my whole life, so the first browser I always check is IE.
Off
Profile
Quote
Top
 
rumbo11
Member Avatar
Level 4
can you please post a preview?
Thanks Louisa
Posted Image

Thank you secret pixel :)

CLICKING THAT IS A WASTE OF TIME


DONATE TO HELP TEENS OUT OF DEBTS....

Posted Image
Off
Profile
Quote
Top
 
Aidan
Member Avatar
Level 12
rumbo11
Sunday, 8. January 2012, 12:39
can you please post a preview?
Take a look at the sidebar (submenu).
Off
Profile
Quote
Top
 
Geoffrey
Member Avatar
It's a love story, baby just say yes
DaPizzaMan
Thursday, 5. January 2012, 22:23
I had no idea the opacity property was a CSS3 property until just now. Ha ha, I guess you learn something new everyday. :P
So what you told me the other day was wrong?

Nice tutorial, very simple and neat effect. I see a lot more opacity popping up in themes now. haha.
Consider this statement my permission to convert my themes to other platforms. Please link back to http://geoffreykoester.com. Be sure to rehost all theme images on the new platform as we do not know how long they will redirect. Also some boards hosting theme/skin images may not survive the move.

Posted Image

Other Sigs
Awards & Memories
Off
Profile
Quote
Top
 
Aidan
Member Avatar
Level 12
GAK
Sunday, 8. January 2012, 21:57
DaPizzaMan
Thursday, 5. January 2012, 22:23
I had no idea the opacity property was a CSS3 property until just now. Ha ha, I guess you learn something new everyday. :P
So what you told me the other day was wrong?
background:rgba(#,#,#,#); and opacity:#; aren't the same thing. One affects only the opacity of the background(-color, -image, etc.) and one affects the opacity of that entire selector. I only recently (after seeing this tutorial) figured out that the latter is CSS3. To answer your question: no, what I had told you was not wrong.
Off
Profile
Quote
Top
 
rumbo11
Member Avatar
Level 4
thanks DPM
Thanks Louisa
Posted Image

Thank you secret pixel :)

CLICKING THAT IS A WASTE OF TIME


DONATE TO HELP TEENS OUT OF DEBTS....

Posted Image
Off
Profile
Quote
Top
 
Aidan
Member Avatar
Level 12
Outline Documentations
T H E M E S

Documentation accepted in to the Themes database
Off
Profile
Quote
Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Coding & Development · Next Topic »

Welcome Guest [Log In] [Register]
Outline Live
Loading..
Loading..