Hi everyone, I started building my portfolio website, and got stuck with an effect I'm trying to achieve, but can't seem to quite get it.

here's the link to the website: http://maxpirsky.com

so, the main idea is, to have control over the opacity of the thumbnails as well as their saturation, and also to get these sliding caption boxes pop inside the thumbnail when the cursor is hovering over one of them.
I managed to get the part with the opacity and caption boxes working, but the thing I can't manage to do, is desaturate them when they're not hovered upon.
I also tried the following: http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery/
where I would be able to use two samples of the thumbnail, one colored - the other black and white with low opacity, I almost got the desired effect - once hovering over the thumbnail itself, everything was fine, but when hovering over the caption box inside the thumb, the image would go back to the previous state (black and white). And this whole thing needs to be dynamic, so it can be updated through wordpress.
So.. Does anyone have any idea what I can do about this?

The other thing I couldn't figure out is, how can I make the sliding boxes of the captions dynamic? (get either larger or smaller depending on the information inside)
something like the thumbnails here: http://sessions.tutsplus.com/creativ...ry/web-design/

Thanks in advance,