css greyscale hover

Out of context: Reply #18

  • Started
  • Last post
  • 22 Responses
  • forcetwelve0

    i can follw the markup to a point - until it gets to the background image bit- as i don't have background images in the posts. all i have is the #project div with the images in that. i'm lost.

    <script type="text/javascript">

    $(document).ready(function() {

    $("#project").hover(function() { //On hover...

    var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'

    //Set a background image(thumbOver) on the &lt;a&gt; tag
    $(this).find("a.thumb").css({'ba... : 'url(' + thumbOver + ') no-repeat center bottom'});
    //Fade the image to 0
    $(this).find("span").stop().fade... 0 , function() {
    $(this).hide() //Hide the image after fade
    });
    } , function() { //on hover out...
    //Fade the image to 1
    $(this).find("span").stop().fade... 1).show();
    });

    });

    </script>

    • if you have the div with the img's inside, then you need <a> links with a class of "thumb", doesnt semm that hard..
      ********
    • hard but you should post the html markup + the script on a link we can help you better
      ********

View thread