WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > [SOLVED] Image Opacity

Reply
  Thread Tools Display Modes
Old 15th March 12, 10:13 PM   #1
Zeaks
WLC Lover
 
Zeaks's Avatar
 
Join Date: Sep 2010
Location: Canada
Posts: 59
Default Image Opacity

I'm using Wordpress and added this so my images would show an effect when hovered.

Code:
#body .gallery img:hover {
opacity:0.5;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
}
It works, but the image shows lighter, is there a way to have darken? I tried using
Code:
#body .gallery img { background: #000; }
But this only made the padding between the image and 3px border dark.
Zeaks is offline   Reply With Quote
Old 16th March 12, 12:04 AM   #2
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Image Opacity

Change the level of opacity, the lower the value the less the opacity.
chrishirst is offline   Reply With Quote
Old 16th March 12, 01:10 AM   #3
Zeaks
WLC Lover
 
Zeaks's Avatar
 
Join Date: Sep 2010
Location: Canada
Posts: 59
Default Re: Image Opacity

Quote:
Originally Posted by chrishirst View Post
Change the level of opacity, the lower the value the less the opacity.
Thanks, but that isn't what I mean. I want the image to go dark, not light when it's hovered.
If I could set the background color when it's hovered, that would work, but like I explained, the background color is behind the image.
Zeaks is offline   Reply With Quote
Old 16th March 12, 10:46 AM   #4
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Image Opacity

You can't make an image 'darker' than it is using CSS, you could overlay an absolutely positioned, partially opaque element on hover, BUT that would have to be at the top of the stacking order which would then 'obscure' the lower order elements and prevent them receiving any mouse events.
chrishirst is offline   Reply With Quote
Old 16th March 12, 02:50 PM   #5
csswizard
WLC Member
 
Join Date: Mar 2012
Posts: 17
Default Re: Image Opacity

May be you should check this

http://www.w3schools.com/css/css_image_transparency.asp
csswizard is offline   Reply With Quote
Old 16th March 12, 04:36 PM   #6
Zeaks
WLC Lover
 
Zeaks's Avatar
 
Join Date: Sep 2010
Location: Canada
Posts: 59
Default Re: Image Opacity

Thanks for the info, and the link. Using an image as is doesn't work, because of the stacking order like you mentioned.
The thing with Wordpress galleries is they are added using a shortcode instead of classes I can add to. I'll have to look into how the gallery works and probably edit the template files and do what you said.
Zeaks is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

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

Forum Jump


All times are GMT. The time now is 01:07 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.