View Full Version : black and white image hover

04-01-2011, 02:30 PM
if you click on any of this images on this page (http://cpanel4.frontline.net/~ggarchit/building-construction-newton-nj/) you'll see that i'm using the Fancybox plugin (http://wordpress.org/extend/plugins/fancy-box/) to highlight the images.

however, before someone clicks on the image, I'd like it to darken when someone hovers over it. Like the black and white effect that happens on this page (http://www.johnstonarchitects.com/single.html).

Please advise how i add that effect. thanks in advance.

04-01-2011, 03:30 PM
Well that page has 2 images. One the normal picture, the second is the sepia one. It uses javascripts onmouseover, but that's lame. Use the css pseudo class instead http://www.w3schools.com/css/css_pseudo_classes.asp
Alternatively, to save space, you could try and make one opaque image and put it over the top, could be fiddly though, so start with the hover pseudo class.
Actually there are better hover examples here http://www.w3schools.com/css/css_image_sprites.asp

04-01-2011, 07:09 PM
i got it to work in firefox with this

how come neither of these elements work??

.single-post .gallery-icon a:hover {filter:Alpha(opacity=50); opacity:0.5;}

but the effect doesnt show in IE. any idea how I get it to work in IE?

04-02-2011, 05:21 AM
Ah, IE and image opacity...sigh. Although it looks good to me. Personally I wouldn't capitalise the A, but that's a just incase thing, pretty sure it doesn't matter. But I do remember something about you have to have something...i forget what its called :P...hasSomething to get it to work. There are little hacks like zoom:1, maybe position:relative, to do that. I can't seem to find it in the small amount of googling i just did. Hopefully what I just said works, or someone with a working brain will come along and figure out what im talking about.