we are going to show you how to mask images with shapes plus some nifty zoom animation effects with just HTML & CSS. I have seen this kind of styling and effect in many portfolio websites and let me show you how it's made.

HTML

To make it easy to understand, I have made an image to illustrate what each layer does.

<div class="shape">
	<a href="{URL}" class="overlay {round|hexagon|pentagon}"></a>	
	<div class="details">
		<span class="heading">{TITLE}</span>
		<hr />
		<p>{DESCRIPTION}</p>		
		<a href="{URL}" class="button">VIEW</a>
	</div>	
	<div class="bg"></div>	
	<div class="base">
		<img src="{IMAGE URL}" alt="" />
	</div>	
</div>	

In case you need the fonts I used in this tutorial, here is it:

<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'>

CSS

We don't have Javascript in this tutorial. We use :hover pseudo code and also CSS animation to do simple mouseover and zooming effects.

Here is the portion of code that does all these animation effects:

.shape .overlay {
	display:block;
	width: 310px;
	height: 310px;
	position: absolute;
	top:-5px;
	left:-5px;
	-webkit-transform: scale(1,1);
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-duration: 0.6s;
	-moz-transform: scale(1,1);
	-moz-transition-timing-function: ease-out;
	-moz-transition-duration: 0.6s;
	transform: scale(1,1);
	transition-timing-function: ease-out;
	transition-duration: 0.6s;				
	z-index:500;
	/* allow user to actually perform actions underneath this layer */
	pointer-events:none; 
	background-repeat: no-repeat;
}

......

/* hover effect */
.shape:hover .overlay {
	-webkit-transform: scale(1.07,1.07);
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-duration: 0.3s;
	-moz-transform: scale(1.07,1.07);
	-moz-transition-timing-function: ease-out;
	-moz-transition-duration: 0.3s;
}

.shape:hover .bg {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  -khtml-opacity: 0.8;
  opacity: 0.8;
  display:block;
}

.shape:hover .details {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
	z-index:450;
  display:block;	
}	

......

Read more:http://www.queness.com/post/14450/display-images-with-shape-masking-and-nifty-zoom-effect