Related posts:

1. Greyscale Hover Effect w/ CSS & jQuery
2. Create a Professional Web 2.0 Layout

My solution relies on CSS Sprites and a few lines of jQuery, but requires a bit of preparation before it can be implemented. It is not recommended for large scale projects and probably best for displaying portfolio pieces.

Wireframe – HTML

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

<ul>
	<li>
		<a href="#"><span><img src="image.gif" alt="" /></span></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 <span> tag. The <span> tag will be used to crop the image to only show its default state. Take a look at the image below to get a visual.

Styling – CSS

We will style this up as a typical gallery. Only thing unique about the below CSS is that we have the <span> 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"></script>

The logic here will be to fade out the default thumbnail, and set a background image on the <a> 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

$(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();
	});

});

Conclusion

I’m sure there are various ways of achieving this technique. I decided to use CSS Sprites technique to prevent glitching on the initial hover over. If anyone has a better solution, have questions, or suggestions, please feel free to let me know!

Related posts:

1. Simple Page Peel Effect with jQuery & CSS
2. Easy to Use Safari Style jQuery Slider Plugin
3. jQuery.popeye – an inline lightbox alternative

We love Mac, we love Fish Eye Menu. The idea behind a fisheye control is a strip of icons, being vertical or horizontally laid out that reacts to the user’s mouse as it approaches the icon. Here is a list of Nice Fish Eye Menu for you to dowload and use it in your web application.

CSS Dock Menu

Fish Eye Menu for Prototypejs

Fish Eye Menu for Mootools

DHTML Fish Eye Menu for Text

Fish Eye Menu Tutorial

Related posts:

1. Ajax.org – Open Source Application Platform for RIAs
2. The Monster List of Freelance Job Sites – 2009 Update
3. Create Snook-Style Navigation Using MooTools

1. Magnifico

2. BRILLIANCY

3. eCoverSuiteElite

4. Hey Indy

5. MetaLab

6. Fluid Theme

7. Tea Round App

8. Stick It USB

9. Douglas Menezes

10. We Love Icons

11. Duirwaigh Studios

12. siete de febrero

13. Morphix

14. Humza Ijaz

15. Trent Cruising

16. Pacifica

17. Dishizzle

18. Paul Carbo

19. Beerenberg Farm

20. Honblue Inc.

21. iDesign iPhone

22. AdWorks

23. Pixelcraft

24. Guifx

25. Point Zero

26. Simple Art

27. Add Noise

28. Midtone Design

29. Transmissions

30. Serj

31. Jumpstart

32. Cellar

33. Zaum & Brown

34. World of Merix Studio

35. Hymns

• Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.

Related posts:

1. Free CSS Layouts And Templates
2. 101 Awesome Portfolio Sites
3. Inspiration: Awesome Dark Portfolio Sites

Clippings are currently only offered in the shape of a rectangle but more shapes might be supported in the future. You can create a rectangle clipping using the rect shape. Using rect requires four coordinates Top, Right, Bottom, Left (TRBL). Let’s take a closer look at how clip calculates the clipping region since it tends to cause some confusion. Keep in mind that the bottom starts from the top, and the right starts from the left.

Example
Here is a sample image we want to clip

Add Some Drop Shadow

Finally to add some drop shadow to the clipped thumbnail I am using three wrapper divs with negative offsets of slightly varying background colors to create a shade effect. So our final HTML and CSS look like this:

.clipout{
position:relative;
width:136px;
height:105px;
top:-1px;
left:-1px;
}
.clipin{
position:absolute;
clip:rect(50px 218px 155px 82px);
top:-50px;
left:-82px;
}
.shade1{
width:136px;
height:105px;
background-color:#e8e8e8;
}
.shade2{
position:relative;
width:136px;
height:105px;
background-color:#cbcbcb;
top:-2px;
left:-2px;
}
.shade3{
position:relative;
width:136px;
height:105px;
background-color:#a0a0a0;
top:-1px;
left:-1px;
}

and here is the result:

Related posts:

1. Creating a Stunning High Pass, “lll Effect” Portrait
2. Greyscale Hover Effect w/ CSS & jQuery
3. Simple Page Peel Effect with jQuery & CSS