El poder de CSS3 es enorme y en este tutorial veremos cómo explotar de una manera muy creativa. Vamos a crear algunos efectos de activación de miniaturas con transiciones CSS3. El Pase el ratón sobre una miniatura, vamos a revelar alguna descripción de la imagen, usando un estilo diferente en cada ejemplo.
Tenga en cuenta que esto sólo funcionará correctamente en los navegadores modernos que apoyan las propiedades de CSS3 en uso.
El Tutorial
La estructura es muy sencillo e intuitivo. Crear un contenedor que tendrá nuestra imagen y todo los demás.
Dentro de view insertar un elemento con la clase mask que se encargará de nuestros efectos impulsados por CSS3 y en su interior vamos a poner un título, una descripción y un enlace a la imagen completa. (Para algunos ejemplos, tendremos que añadir el elemento de máscara como un elemento separado y envolver la descripción en una devi con la clase content.)
<div class="view">
<img src="image.gif" />
<div class="mask">
<h2>título</h2>
<p>tu texto</p>
<a href="#" class="info">lee más</a>
</div>
</div>
Después de la creación de nuestro margen vamos a establecer nuestros estilos. Fijamos las reglas generales para nuestra clase y luego vamos a añadir una clase especial con los estilos de efectos deseados. Vamos a omitir los prefijos de proveedores de CSS3 al mostrar el estilo.
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.view img {
display: block;
position: relative
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.view a.info:hover {
box-shadow: 0 0 5px #000
}
Ejemplo 1
Agregue la clase especial view-first al elemento con la clase view. Vamos a añadir una clase especial de elemento de cada ejemplo view (view-first, view-second, view-third, etc).
<div class="view view-first">
<!-- ... -->
</div>
En este primer ejemplo vamos a utilizar sólo algunas transiciones básicas para crear un efecto hover agradable.
.view-first img {
transition: all 0.2s linear;
}
.view-first .mask {
opacity: 0;
background-color: rgba(219,127,8, 0.7);
transition: all 0.4s ease-in-out;
}
.view-first h2 {
transform: translateY(-100px);
opacity: 0;
transition: all 0.2s ease-in-out;
}
.view-first p {
transform: translateY(100px);
opacity: 0;
transition: all 0.2s linear;
}
.view-first a.info{
opacity: 0;
transition: all 0.2s ease-in-out;
}
Y ahora viene el corazón de nuestro efecto. Al mover el puntero del ratón sobre la imagen, podemos utilizar la propiedad de retraso para emular animaciones simples. La transición de retardo que se utiliza en la clase de vuelo estacionario puede ser alterado, siendo differnt que el de la clase normal. En este ejemplo no usamos ningún retraso en la clase normal; pero hemos añadido un retraso en el vuelo estacionario, lo que hará que la transición se inicia un poco más tarde. Al mover el ratón fuera, el valor predeterminado de 0s se aplicará y la "marcha atrás" será más rápido.
.view-first:hover img {
transform: scale(1.1);
}
.view-first:hover .mask {
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
opacity: 1;
transform: translateY(0px);
}
.view-first:hover p {
transition-delay: 0.1s;
}
.view-first:hover a.info {
transition-delay: 0.2s;
}
Ejemplo 2
En este segundo ejemplo vamos a añadir la clase especial view-second, pero dejaremos el elemento con la clase mask vacía y envolver la descripción en un div con la clase content
<div class="view view-second">
<img src="images/5.jpg" />
<div class="mask"></div>
<div class="content">
<h2>Hover Style #2</h2>
<p>Some description</p>
<a href="#" class="info">Read More</a>
</div>
</div>
Aquí la clase mask tendrá diferentes atributos para satisfacer a nuestros efectos, de hecho vamos a aplicar la propiedad de transformar (traducir y girar) y haremos un cuadrado fuera de él. Los elementos de descripción se traducirán, es decir, se movió para que podamos deslizar en el elemento emergente:
.view-second img {
transition: all 0.2s ease-in;
}
.view-second .mask {
background-color: rgba(115,146,184, 0.7);
width: 300px;
padding: 60px;
height: 300px;
opacity: 0;
transform: translate(265px, 145px) rotate(45deg);
transition: all 0.2s ease-in-out;
}
.view-second h2 {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
transform: translate(200px, -200px);
transition: all 0.2s ease-in-out;
}
.view-second p {
transform: translate(-200px, 200px);
transition: all 0.2s ease-in-out;
}
.view-second a.info {
transform: translate(0px, 100px);
transition: all 0.2s 0.1s ease-in-out;
}
Para nuestro efecto hover explotamos la transformación se traducen con el fin de mover nuestros elementos en su lugar. La máscara también se girará. Los elementos de la descripción serán con un poco de retraso:
.view-second:hover .mask {
opacity:1;
transform: translate(-80px, -125px) rotate(45deg);
}
.view-second:hover h2 {
transform: translate(0px,0px);
transition-delay: 0.3s;
}
.view-second:hover p {
transform: translate(0px,0px);
transition-delay: 0.4s;
}
.view-second:hover a.info {
transform: translate(0px,0px);
transition-delay: 0.5s;
}
Ejemplo 3
<div class="view view-third">
<img src="image.gif" />
<div class="mask">
<h2>Titulo</h2>
<p>Contenido texto</p>
<a href="#" class="info">Leer Más</a>
</div>
</div>
En este tercer ejemplo vamos a utilizar las transformaciones traducir y girar para abrir nuestro contenido:
.view-third img {
transition: all 0.2s ease-in;
}
.view-third .mask {
background-color: rgba(0,0,0,0.6);
opacity: 0;
transform: translate(460px, -100px) rotate(180deg);
transition: all 0.2s 0.4s ease-in-out;
}
.view-third h2{
transform: translateY(-100px);
transition: all 0.2s ease-in-out;
}
.view-third p {
transform: translateX(300px) rotate(90deg);
transition: all 0.2s ease-in-out;
}
.view-third a.info {
transform: translateY(-200px);
transition: all 0.2s ease-in-out;
}
Estas son las sencillas instrucciones que se aplican en vuelo estacionario. Ahora vamos a revertir la aparición de los elementos de descripción mediante el establecimiento de la transición de la demora en consecuencia:
.view-third:hover .mask {
opacity:1;
transition-delay: 0s;
transform: translate(0px, 0px);
}
.view-third:hover h2 {
transform: translateY(0px);
transition-delay: 0.5s;
}
.view-third:hover p {
transform: translateX(0px) rotate(0deg);
transition-delay: 0.4s;
}
.view-third:hover a.info {
transform: translateY(0px);
transition-delay: 0.3s;
}
Ejemplo 4
<div class="view view-fourth">
<img src="image.gif" />
<div class="mask">
<h2>Titulo</h2>
<p>Contenido texto</p>
<a href="#" class="info">Leer Más</a>
</div>
</div>
Aquí en el cuarto ejemplo, vamos a realizar un zoom de imagen hacia fuera sencillo y un zoom en la de nuestro contenido con la rotación, todo gracias a la escala transforman. Fijamos la transición de retardo a 0.2s para el estilo de la imagen, pero en vuelo estacionario vamos a decir que es 0s. Esto hará que se inicie de inmediato en vuelo estacionario, pero retrasarlo adelante del ratón.
.view-fourth img {
transition: all 0.4s ease-in-out 0.2s;
opacity: 1;
}
.view-fourth .mask {
background-color: rgba(0,0,0,0.8);
opacity: 0;
transform: scale(0) rotate(-180deg);
transition: all 0.4s ease-in;
border-radius: 0px;
}
.view-fourth h2{
opacity: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
transition: all 0.5s ease-in-out;
}
.view-fourth p {
opacity: 0;
transition: all 0.5s ease-in-out;
}
.view-fourth a.info {
opacity: 0;
transition: all 0.5s ease-in-out;
}
Estas son las instrucciones sencillas para conseguir el efecto - con CSS3 se puede hacer todo :)
.view-fourth:hover .mask {
opacity: 1;
transform: scale(1) rotate(0deg);
transition-delay: 0.2s;
}
.view-fourth:hover img {
transform: scale(0);
opacity: 0;
transition-delay: 0s;
}
.view-fourth:hover h2,
.view-fourth:hover p,
.view-fourth:hover a.info{
opacity: 1;
transition-delay: 0.5s;
}
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
