Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Brighten images from dark to light on hover

Brighten images from dark to light on hover

Problem

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.

Problem courtesy of: Salem

Solution

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

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.

Solution courtesy of: Julian D.

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Brighten images from dark to light on hover

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×