Cómo enmascarar imágenes con formas y añadirles un efecto zoom

Hoy os vamos a mostrar cómo enmascarar imágenes con formas y también a añadirles unos cuantos efectos de animación de zoom con sólo HTML y CSS. He visto este tipo de estilos y efectos en muchos portfolios web, seguro que no te resulta extraño. Así que, déjame que te enseñe cómo hacerlo en tu propia web.

Personalmente, no creo que debamos frenar nosotros mismos el uso de las nuevas técnicas de desarrollo, tales como CSS3 en proyectos web porque los navegadores más antiguos no son compatibles con dichas técnicas. Creo que hay que "premiar" a los usuarios con navegadores modernos, dándoles una mejor experiencia de usuario. Por lo tanto, siempre haré uso de CSS3 en mis proyectos, pero, por supuesto, me aseguraré de que no se chafe el diseño o que al menos se muestre bien, la web, en los navegadores antiguos.

En este tutorial vamos a utilizar CSS3 transform lo que significa, que los viejos navegadores no mostrarán el efecto zoom que pretendremos aplicar. La buena noticia es que, incluso si se trata de navegadores antiguos, se verá bastante bien y será usable.

Imágenes

Queremos que este ejemplo sea utilizable en la mayoría de los navegadores, por lo tanto, no vamos a dibujar la forma utilizando CSS3 o cualquier técnica fantástica. Nos ceñiremos a la manera clásica, un PNG transparente. Así sería el aspecto de cada una de las formas:

HTML

Para hacer esto fácil de entender, he creado una imagen que ilustra lo que hace cada una de las capas.

<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>	

En el caso de que quieras utilizar fuente personalizadas, aquí te dejamos dos sugerencias:

<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

No tenemos Javascript en este tutorial. Vamos a usar la pseudo clase :hover y también algo de animación en CSS para hacer el mouseover sea simple y añadirles efectos de zoom.

Aquí está la porción del código que se encarga de realizar todas las animaciones que he mencionado antes:

......

.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;	
}	

......

Aquí tienes el CSS completo:

.shape {
	width: 300px;
	height: 300px;
	position: relative;
}
		
	.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;
	}

/* different shapes */
.shape .overlay.round {
	background: url(round.png);		
}

.shape .overlay.hexagon {
	background: url(hexagon.png);
}

.shape .overlay.pentagon {
	background: url(pentagon.png);
}			

/* 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;	
}	
		
		

/* content styles */
.shape .bg, 
.shape .details {
	position: absolute;
	width: 300px;
	height:300px;
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	top:0;
	left:0;
	opacity:0;
	-webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;				
	display:none;  
}		

.shape .bg {
	background: #4b5a78;		
}

.shape .details span.heading {
	font-family: 'Roboto Condensed', serif;		
	font-size:30px;
	display:block;
	margin-top:70px;
	color:#fff;
	text-decoration:none;
}

.shape .details p {
	font-family: 'Abel', sans-serif;		
	color:#fff;
	width: 70%;
	font-size:14px;
	margin:0 auto;
}

.shape a.button {
	padding:5px 15px;
	font-family: 'Abel', sans-serif;	
	font-size:12px;	
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	-o-border-radius: 20px;
	border-radius: 20px;
	background: #2f3644;
	text-decoration:none;
	color:#fff;
	display:block;
	width:50px;
	margin:0 auto;
	text-align:center;
	margin-top:15px;
}

	.shape a.button:hover {
		background: #fff;
		color: #2f3644;				
	}

Como ves, es bastante simple de hacer y es muy elegante también. Puedes cambiar la forma a lo que quieras. Este tutorial se ha probado en IE8 y debería funcionar en la mayoría de los navegadores modernos. Si tienes alguna pregunta, déjanos un comentario.

Fuente: queness.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP