Portfolio Thumbnail Opacity

Question

Hey guys,

I am a designer, creating myself a portfolio. The idea of the portfolio is to lazy-load my work as the user scrolls, and they can use the thumbnails on the left to jump to a project (just using anchors).

My question: is there a way to have it so the thumbnails on the right are less opaque unless the user is looking at the part of the page with the images for a given project? In other words the only time the thumbnail in my example link would be full-color would be when the user was on the part of the page that contains the 3 associated project images.

Link: http://seans.ws/sandbox/seansSite/

Thank you. Please let me know if you need any clarification!

-Sean

Answer 1

Sure, first, lower the opacity for the images in your CSS:

#moveitContainer img { opacity: 0.3; }

And since you are already using jQuery, changing opacity is easy.

$('#moveitContainer')
    .mouseenter(function(e){
        $(this).find('img')
            .stop(true) //get rid of queued animations
            .fadeTo(200, 1.0)
    })
    .mouseleave(function(e){
        $(this).find('img')
            .stop(true)
            .fadeTo(200, 0.3)
    });

Answer 2

I dont think this does the trick..anyone have any other ideas?