How can i give image hover effect like this?

I want to give my images hover effect like this. How can I achieve this. I am talking about thumbnail hovers only, not the whole .

 

why don't you use javascript or jquery? there you have lots of event listeners like hover/ mouse enter, mouse leave etc..

 

I really have to laugh whenever you get something like this, and the first answer is "throw a bunch of javascript at it", particularly that fat bloated idiotic train wreck known as jQuery... when really this is CSS' job. Nothing like blowing some stupid idiotic 30k library (100k uncompressed) AND then even more scripting on top of it, to do what can be done in less than 1k of CSS -- it's hover states, that's presentation and belongs in the CSS.

<ul id="thumbGallery">
	<li>
		<a href="#">
			<img src="images/thumbnail_1.png" alt="describe this image" />
		</a>
	</li><li>
		<a href="#">
			<img src="images/thumbnail_2.png" alt="describe this image" />
		</a>
	</li>
	<!-- etc, etc -->
</ul>

Code (markup):

/*
	assumes margins and padding are reset on UL and LI
*/
#thumbGallery {
	list-style:none;
	text-align:center;
}

#thumbGallery li {
	display:inline;
}

#thumbGallery a {
	display:inline-block; /* fix size IE */
	text-decoration:none;
	color:#FFF; /* IE transition fix, see below */
	/* mag glass image should be white on black */
	background:#000 url(images/magnifyingGlass.png) center center no-repeat;
}

#thumbGallery img {
	vertical-align:bottom; /* fix cross-browser positioning bugs */
	-webkit-transition: opacity 0.25s ease-in-out;
	-moz-transition: opacity 0.25s ease-in-out;
	-o-transition: opacity 0.25s ease-in-out;
	transition: opacity 0.25s ease-in-out;
}

#thumbGallery a:active,
#thumbGallery a:focus,
#thumbGallery a:hover {
	/*
		IE transition fix -- sometimes IE will ignore hovers on child elements
		if you don't change something on the parent.
	*/
	color:#888; 
}

#thumbGallery a:active img,
#thumbGallery a:focus img,
#thumbGallery a:hover img {
	opacity:0.5;             /* modern browsers */
	-moz-opacity:0.5;        /* FF 4 and lower */
	filter:alpha(opacity=50); /* IE 8 and lower */
}

Code (markup):

That's it, no javascript needed. IE users don't get the animation since that's CSS3, OH WELL. They'll still get the hover effect, just no smooth fade-in and fade-out. (I actually kind of prefer it without the fade, it feels more 'snappy' and 'responsive')

The above code is untested, but should work. When I'm back at my desktop I'll plug that into a real page and put up a working demo -- on the road right now. The idea is simple -- put a black background with your symbol underneath the img on it's anchor - when you hover you make the anchor transparent so the black background and white symbol show through it... CSS3's transition property provides the smooth in-out effect.

I also would advise against the fixed width layout and fixed number of elements across, but that's because I actually care about people using the page.

 

... and here we are:

http://www.cutcodedown.com/for_others/sakib000/template.html

as with all my examples the directory is unlocked:

http://www.cutcodedown.com/for_others/sakib000/

for easy access to the bits and pieces. Modern browsers get the fade animations, old browsers all the way back to IE 5.5 will still get the opacity effect!

Also proves what total trash the turdpress plugin they are using has for markup, given that some 50% or more of the markup used on that site you linked to serves no legitimate purpose... but that's a given the moment Wordpress is involved.

 

Already solution given

 

i think if you use jQuerty everything is simple