El ejemplo se muestra un pequeño triángulo que al posicionar el puntero del ratón sobre la imagen se desplaza al centro de la imagen de manera automática, utilizando solo CSS3.
Lo primero que haremos será crear la estructura de nuestro archivo HTML
<div class="view">
<img src="http://i.minus.com/jj5nxmcAsZ5dQ.jpg" />
<div class="mask"></div>
<div class="content">
<a href="http://i.minus.com/ibuNcQOEUx7J4C.jpg" class="info" title="Full Image">Full Image</a>
</div>
</div>
Como podemos ver en el código, hemos creado un div contenedor. Este div contiene:
- La imagen en si,
- Un div clase "mask" que auspicia de mascara y es donde aplicaremos los efectos CSS3, y
- Un div clase "content" que mostrara un enlace a la imagen de mayor tamaño.
Lo segundo será crear el CSS con las propiedades básicas.
html, body {
background:#000;
min-width:960px;
text-align:center;
}
.view {
width: 500px;
height: 285px;
margin: 100px auto;
border: 5px solid #fff;
overflow: hidden;
position: relative;
}
.mask, .content {
width: 500px;
height: 285px;
position: absolute;
overflow: hidden;
top: 0;
left:0;
}
.view a.info {
background:url(http://i.minus.com/jsT2ZaRAsqcGr.png) center no-repeat;
display: inline-block;
text-decoration: none;
padding:0;
text-indent:-9999px;
margin-top:75px;
width:25px;
height:25px;
}
Lo tercero será agregar en el CSS los efectos que queremos realizar en este tutorial, y acá me detendré un poquito para tratar de explicar brevemente las Transiciones de CSS3.
Las Transiciones con CSS permiten realizar cambios en los valores de una propiedad durante un determinado tiempo de manera progresiva, esto permite realizar transiciones en las propiedades de un elemento eliminando así la necesidad de utilizar Javascript.
La sintaxis básica de las Transiciones con CSS es:
transition: property time easing;
property: Propiedad a aplicar la transición (color, width, etc).
time: Tiempo de duración expresado en segundos de la transición.
easing: Tipo de aceleración de la animación (ease, linear, ease-in, ease-out, ease-in-out).
Obviamente el efecto de este tutorial solo funcionará en navegadores que tienen implementada la especificación CSS3, entonces para que los navegadores actuales puedan interpretarlo hace falta agregar los prefijos de acuerdo a cada navegador (-webkit-, -moz-, -o-), esto garantizará que las transiciones se vean correctamente en Chrome, Safari 3.2+, Firefox 4.0+ y Opera 10.5+. En los otros casos (incluyendo Internet Explorer) no se verá la transición solo se verá un cambio brusco entre uno y otro estado.
Ahora si pasemos a la segunda parte del código CSS:
.view img {
opacity:1;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}
.view .mask {
opacity:0;
overflow:visible;
border-color:rgba(0,0,0,0.7) transparent transparent transparent;
border-style:solid;
border-width:250px;
width:0;
height:0;
-webkit-transform:translateY(-125px);
-moz-transform:translateY(-125px);
-o-transform:translateY(-125px);
transform:translateY(-125px);
-webkit-transition: -webkit-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
-moz-transition: -moz-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
-o-transition: -o-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
transition: transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
}
a.info {
opacity:0;
-webkit-transform:translateY(-125px);
-moz-transform:translateY(-125px);
-o-transform:translateY(-125px);
transform:translateY(-125px);
-webkit-transition: -webkit-transform 0.3s ease-in, opacity 0.1s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in, opacity 0.1s ease-in-out;
-o-transition: -o-transform 0.3s ease-in, opacity 0.1s ease-in-out;
transition: transform 0.3s ease-in, opacity 0.1s ease-in-out;
}
.view:hover img {
opacity:0.7;
-webkit-transform:scale(2,2);
-moz-transform:scale(2,2);
-o-transform:scale(2,2);
transform:scale(2,2);
}
.view:hover .mask {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
.view:hover a.info {
opacity:1;
-webkit-transform:translateY(100px);
-moz-transform:translateY(100px);
-o-transform:translateY(100px);
transform:translateY(100px);
}
Notese que hemos utilizado "all" como propiedad en "transition", lo cual indica que se debe hacer la transición sobre todos las propiedades del elemento.
Eso es todo por esta vez, espero que les haya servido
