Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Css toggle opacity feature
Old 01-27-2009, 07:22 AM Css toggle opacity feature
Andy Pugh's Avatar
Extreme Talker

Posts: 203
Name: Andy
Location: N.Ireland
Trades: 0
Hi Guys,
I'm using a little code I found online to toggle opacity on pictures, to give it a highlight effect on rollover, now it works and everything looks pretty but the problem is, it isn't validating with the W3C, does anyone know if a more efficient way to work this code?

HTML Code:
.toggleopacity img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
}

.toggleopacity:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}

.toggleopacity img{
border: 2px solid #fff;
}

.toggleborder:hover img{
border: 2px solid navy;
}

.toggleborder:hover{
color: red;
}


.nontoggleopacity img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
}

.nontoggleopacity:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}

.nontoggleopacity img{
border: 0px solid #fff;
}

.nontoggleborder:hover img{
border: 0px solid navy;
}

.nontoggleborder:hover{
color: red;
}
You can see it live at http://www.mediacubed.co.uk/design

Hope you can help,
thanks guys,
Andy
__________________

Please login or register to view this content. Registration is FREE
Andy Pugh is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 01-27-2009, 09:45 AM Re: Css toggle opacity feature
wayfarer07's Avatar
Poo on You

Latest Blog Post:
Introducing WowWindow
Posts: 3,985
Name: Abel Mohler
Location: Asheville, North Carolina USA
Trades: 0
The -moz-opacity selector is no longer needed. You can use opacity: instead (same syntax on the right hand side). This will also allow it to work in browsers like Safari, Chrome, and Opera.

If you want it to work in IE, it will never validate (you can use {filter: alpha(opacity=50)} however, instead of the long version you have shown).

Even the normal opacity: selector will not validate unless you run it through a CSS3 validation. Not that this matters one bit in reality.
__________________
Join me on
Please login or register to view this content. Registration is FREE
wayfarer07 is offline
Reply With Quote
View Public Profile Visit wayfarer07's homepage!
 
Old 01-27-2009, 10:20 AM Re: Css toggle opacity feature
Andy Pugh's Avatar
Extreme Talker

Posts: 203
Name: Andy
Location: N.Ireland
Trades: 0
Hi, thank's for your response, I removed the internet explorer filter, to be honest, I'd rather have it not work than not validate, it's operational in Firefox now, but as you mentioned, it only validates in CSS3.

Arghhhh, (screams usual rant about I.E...)
Andy
__________________

Please login or register to view this content. Registration is FREE
Andy Pugh is offline
Reply With Quote
View Public Profile
 
Old 01-27-2009, 10:32 AM Re: Css toggle opacity feature
wayfarer07's Avatar
Poo on You

Latest Blog Post:
Introducing WowWindow
Posts: 3,985
Name: Abel Mohler
Location: Asheville, North Carolina USA
Trades: 0
May I ask what your logic is in the need for a CSS document to validate?
__________________
Join me on
Please login or register to view this content. Registration is FREE
wayfarer07 is offline
Reply With Quote
View Public Profile Visit wayfarer07's homepage!
 
Old 01-27-2009, 10:39 AM Re: Css toggle opacity feature
Andy Pugh's Avatar
Extreme Talker

Posts: 203
Name: Andy
Location: N.Ireland
Trades: 0
Honestly? I'm just purely pedantic, I know theres no overall purpose in terms of how things operate. Odd, I know lol !
__________________

Please login or register to view this content. Registration is FREE
Andy Pugh is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Css toggle opacity feature
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.15146 seconds with 12 queries