Question

I’m looking for a script of some sort that will select all images on a page within a certain div.class, apply a transparent black shadowing to it, and then fade it out on hover. Does anyone know of a system of doing this? I can’t really modify the site itself (http://cargocollective.com/maureengriswold) or I’d have figured out some shoddy way of doing it already.

Answer 1

Typically you would do this by putting a black background behind your images and the set the opacity of the images to some value < 1.

On your site, you would add the following CSS:

.cardimgcrop {
    background-color: black;
    border-color: white;
}

.cardimgcrop img {
    opacity: 0.7;
}

.cardimgcrop img:hover {
    opacity: 1;
}

UPDATE:

If you want an animated fading, you would leave out the :hover CSS definition and add the following Javascript lines (using jQuery 1.4.2 as already used on your site):

$(document).delegate('.cardimgcrop img', 'mouseover', function() {
   $(this).fadeTo(500, 1);
});
$(document).delegate('.cardimgcrop img', 'mouseout', function() {
   $(this).fadeTo(500, 0.7);
});

Of course you could also native CSS transitions instead for this effect (as suggested in Howard’s answer), but you would need to take care of browser capabilities.