Si alguno de vosotros conocéis PizzaTime.com, sabréis que en el sitio web tienen un curioso efecto hover en sus cajas de navegación, que pasan a ponerse desde un fondo blanco a uno rojo, es decir, cuando pasamos el cursor por una de ellas pasan de estar así:

pizzatime-unhover

A estar así:

pizzatime-hover

Un cuadrado rojo se va haciendo más grande hasta llenar toda la caja. Un efecto muy bonito pero, ¿cómo podemos crearlo? Aquí la solución, vista en CSS-Tricks:

Código HTML

Usaremos esto:

Select Code
<a href="#0" class="pizza-link">
<span class="icon maki-embassy"></span>
<h3>Find a Store</h3>
<p>We've got a location near you! As far as Bellingham and Lewiston and Yakima and South to Olympia.</p>
</a>

Es muy cómodo hacer que una etiqueta anchor actúe como caja y enlace, así que usaremos <a> como anchor para estilizar la caja actual. Para esta demo se han usado los iconos We Love Icon Fonts, así usaremos los spans con clases predeterminadas para mostrar los iconos. Como los iconos no tienen valor de contenido podríamos usar un pseudo elemento, o si estamos usando spans, aplicarlo con el atributo datta-icon y aria-hidden.

Código CSS

Select Code
.pizza-link {
display: block;
float: left;
/* yadda yadda yadda */
h3 {
border-bottom: 1px solid #eee;
/* relative positioning keeps it on top of :before */
position: relative;
}
p {
/* relative positioning keeps it on top of :before */
position: relative;
}
h3, p {
/* "ease" and "all" are implied */
@include transition(0.2s);
}
.icon {
position: absolute;
color: white;
/* position in middle on top */
}
&amp;:before {
content: "";
background: #D62121;
/* position in middle on top */
/* BELOW icon and other content */
/* :before makes this easier than :after */
position: absolute;
width: 50px;
height: 50px;
top: 20px;
left: 50%;
margin-left: -25px;
@include transition(
/* FIRST STEP */
width 0.2s,
left 0.2s,
margin-left 0.2s,
/* SECOND STEP */
top 0.2s 0.2s,
height 0.2s 0.2s
);
}
&amp;:hover, &amp;:active {
h3 {
color: white;
border-bottom-color: #E14646;
}
p {
color: white;
}
&amp;:before {
width: 230px;
left: 0;
top: 0;
margin-left: 0;
/* hacky, but the parent element */
/* doesn't have explicit height */
/* so can't use 100% */
height: 320px;
}
}
}

Si os fijáis, “red box” es un pseudo elemento. En el pasado podíamos haber usado un span o algo parecido, pero ahora podemos transicionar pseudo elementos, además al ser “red box” un elemento de posición absoluta :before, todo lo que tenemos que hacer es darle al contenido de dentro position:relative y el texto se colocará en la parte superior de la caja roja. Separando los valores que van a ser transicionados, hacemos una transición de varios pasos, es decir, las propiedades horizontales van primero: (width, left, margin-left), luego las verticales (top, height). Especificando un valor de retraso igual que el primer paso, todos irán secuencia uno detrás de otro.

Ejemplo de su funcionamiento

 

Si te ha gustado este artículo, puedes recibir gratis más y mejor por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!