Greyscale Hover Effect CSS & jQuery

Wireframe – HTML

First set up an unordered list which we will use as our foundation for the list
of gallery images.

You will notice that each list will contain an image which is nested within a tag. The tag will be used to crop the image to only show its default state.

Styling – CSS

We will style this up as a typical gallery. Only thing unique about the below CSS is that we have the to crop our image as we demonstrated in the above example.

ul.gallery {
width: 708px; /*--Adjust width according to your scenario--*/
list-style: none;
margin: 0; padding: 0;
}
ul.gallery li {
float: left;
margin: 10px; padding: 0;
text-align: center;
border: 1px solid #ccc;
-moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
-khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
-webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
display: inline; /*--Gimp Fix aka IE6 Fix - Fixes double margin bug--*/
}
ul.gallery li a.thumb {
width: 204px; /*--Width of image--*/
height: 182px; /*--Height of image--*/
padding: 5px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
ul.gallery li span { /*--Used to crop image--*/
width: 204px;
height: 182px;
overflow: hidden;
display: block;
}
ul.gallery li a.thumb:hover {
background: #333; /*--Hover effect for browser with js turned off--*/
}
ul.gallery li h2 {
font-size: 1em;
font-weight: normal;
text-transform: uppercase;
margin: 0; padding: 10px;
background: #f0f0f0;
border-top: 1px solid #fff; /*--Subtle bevel effect--*/
}
ul.gallery li a {text-decoration: none; color: #777; display: block;}

Step 3. Animation – jQuery

For those who are not familiar with jQuery, do check out their site first and get an overview of how it works. I’ve shared a few tricks that I have picked up along the way, you can check those out as well.

Initial Step – Call the jQuery file

You can choose to download the file from the jQuery site, or you can use this one hosted on Google.