...

View Full Version : black and white image hover



sixrfan
04-01-2011, 01: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.

BulletTimeBill
04-01-2011, 02: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

sixrfan
04-01-2011, 06: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?

BulletTimeBill
04-02-2011, 04: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum