| [CSS Snippet] Creating Image Opacity without Two Images | |
|---|---|
| Tweet Topic Started: Thursday, 5. January 2012, 14:50 (969 Views) | |
| davadude | Thursday, 5. January 2012, 14:50 Post #1 |
|
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 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 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.
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 | Thursday, 5. January 2012, 22:23 Post #2 |
![]()
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.
|
Off
Profile |
Quote Top
|
| Wyrlor1494 | Thursday, 5. January 2012, 23:05 Post #3 |
|
Level 4
|
I remember doing this when CSS3 was first coming to be the standard :3 Very nicely written, great job writing it :3 |
![]() ![]() ![]()
| |
Off
Profile |
Quote Top
|
| davadude | Friday, 6. January 2012, 08:51 Post #4 |
|
Ego Sum Promptus
|
Haha, trust me, it's quite new, but it works well!
Thank you, was it easy to follow? |
Off
Profile |
Quote Top
|
| Lewis. | Friday, 6. January 2012, 09:03 Post #5 |
|
Awesomesauce.
|
Very easy to follow and kudos for throwing something in there for IE too.
|
![]() ![]() | |
Off
Profile |
Quote Top
|
| davadude | Friday, 6. January 2012, 10:38 Post #6 |
|
Ego Sum Promptus
|
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. | Friday, 6. January 2012, 11:16 Post #7 |
|
Awesomesauce.
|
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. |
![]() ![]() | |
Off
Profile |
Quote Top
|
| davadude | Friday, 6. January 2012, 15:27 Post #8 |
|
Ego Sum Promptus
|
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 | Sunday, 8. January 2012, 12:39 Post #9 |
|
Level 4
|
can you please post a preview? |
Thanks Louisa![]() Thank you secret pixel :) CLICKING THAT IS A WASTE OF TIME DONATE TO HELP TEENS OUT OF DEBTS....
| |
Off
Profile |
Quote Top
|
| Aidan | Sunday, 8. January 2012, 21:47 Post #10 |
![]()
Level 12
|
Take a look at the sidebar (submenu). |
Off
Profile |
Quote Top
|
| Geoffrey | Sunday, 8. January 2012, 21:57 Post #11 |
![]()
It's a love story, baby just say yes
|
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.![]() Other Sigs Awards & Memories
| |
Off
Profile |
Quote Top
|
| Aidan | Sunday, 8. January 2012, 22:03 Post #12 |
![]()
Level 12
|
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 | Monday, 9. January 2012, 08:34 Post #13 |
|
Level 4
|
thanks DPM |
Thanks Louisa![]() Thank you secret pixel :) CLICKING THAT IS A WASTE OF TIME DONATE TO HELP TEENS OUT OF DEBTS....
| |
Off
Profile |
Quote Top
|
| Aidan | Sunday, 29. January 2012, 11:56 Post #14 |
![]()
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 » |
| Track Topic · E-mail Topic |
8:15 PM Jul 10
|
Powered by ZetaBoards Premium · Privacy Policy



Multi
Multi

































8:15 PM Jul 10


Outline Live