Submit your widget

Display Images with Shape Masking and Nifty Zoom Effect with jQuery

Created 5 years ago   Views 20725   downloads 5804    Author queness
Display Images with Shape Masking and Nifty Zoom Effect with jQuery
View DemoDownload 184.2 KB
Share |

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.


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 />
		<a href="{URL}" class="button">VIEW</a>
	<div class="bg"></div>	
	<div class="base">
		<img src="{IMAGE URL}" alt="" />

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

<link href='' rel='stylesheet' type='text/css'>
<link href='' rel='stylesheet' type='text/css'>
<link href=',700' rel='stylesheet' type='text/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 {
	width: 310px;
	height: 310px;
	position: absolute;
	-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;				
	/* allow user to actually perform actions underneath this layer */
	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;

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


Read more: