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.

<ul class="gallery">
 <li>
 <a href="#" class="thumb"><img src="/image.gif" alt="alt" /></a>
 <h2><a href="#">Image Name</a></h2>
 </li>
</ul>

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.

 <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">

The logic here will be to fade out the default thumbnail, and set a background image on the tag. Using CSS Sprites, we will position the image to the ‘bottom’ so the greyscaled thumbnail can seep through on hover over.

The following script contains comments explaining which jQuery actions are being performed.

jQuery

 <strong><strong>$(document).ready(function() {

 $("ul.gallery li").hover(function() { //On hover...

 var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'

 //Set a background image(thumbOver) on the <a /> tag - Set position to bottom
 $(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});

 //Animate the image to 0 opacity (fade it out)
 $(this).find("span").stop().fadeTo('normal', 0 , function() {
 $(this).hide() //Hide the image after fade
 });
 } , function() { //on hover out...
 //Fade the image to full opacity 
 $(this).find("span").stop().fadeTo('normal', 1).show();
 });

});</strong></strong>

Download: http://www.htmldrive.net/items/download/242

If you cant Download or have any Suggestions please Contact us

Newer news items:

Older news items:

<< Previous pageNext page >>

Recommended Web Hosting For Bloggers and Designers

I recoomended Webhostings for Bloggers and Designers because I am freelancer, working with thousand clients in the worlds. Most of them will use those hosts.

Hostting Features:

Fast, Reliable, Affordable
100% Satisfaction Guarantee
And More...

Special: Reach at 20% discount and 100$ for google adwords

GET STARTED

Comments

0 #1 dennis 2012-06-27 08:58

you claim to share jQuery knowledge with the people in the worldwideweb to provide a better basis of design, whilst using COMIC SANS on your website??? :oops: