http://brosepianoservice.com/generic-30.html
In the gray box, I have a lightbox thumbnail on the left and a scrolling paragraph on the right. In the top example, in order to make the lightbox thumbnail image responsive, I have used Eric Rohloff's techinque, and that works. The lightbox thumbnail is responsive as you shrink and expand the browser window. However, using this technique has caused the thumbnail 'overlay' to disappear.
If you look at the second example down and hover over the thumbnail photo, you will see an overlay with the magnifying glass/plus sign. So in that example the overlay works. But if you resize the browser window slowly you will see at a certain point where the thumbnail photo should shrink responsively, it does not do so (the top thumbnail does shrink), and because of that the scrolling paragraph just about hits the thumbnail photo at a certain point, which it should not do.
It may be too much to hope for but I'm looking for a solution that would allow the the lightbox thumbnail to remain responsive AND have the overlay with the magnifying glass/plus sign functionality as well. Is that possible? I played with the code for a few hours and decided I wouldn't be the one to figure it out.

I'd be wishing we had a CoffeeCup version of lightbox about now.
