Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Aug 2009
    Posts
    411
    Thanks
    119
    Thanked 0 Times in 0 Posts

    black and white image hover

    if you click on any of this images on this page you'll see that i'm using the Fancybox plugin 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.

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

  • #2
    Regular Coder
    Join Date
    May 2010
    Location
    Bathurst, Australia
    Posts
    180
    Thanks
    1
    Thanked 22 Times in 22 Posts
    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
    Last edited by BulletTimeBill; 04-01-2011 at 03:34 PM.

  • #3
    Regular Coder
    Join Date
    Aug 2009
    Posts
    411
    Thanks
    119
    Thanked 0 Times in 0 Posts
    i got it to work in firefox with this

    how come neither of these elements work??
    Code:
    .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?
    Last edited by sixrfan; 04-01-2011 at 07:20 PM. Reason: asdf

  • #4
    Regular Coder
    Join Date
    May 2010
    Location
    Bathurst, Australia
    Posts
    180
    Thanks
    1
    Thanked 22 Times in 22 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •