Efecto hover con CSS3 para pies de foto

El de hoy es un tutorial de esos sencillos pero que visualmente hacen que una web pueda marcar diferencias.
Utilizando nada más que hojas de estilo vamos a crear pies de foto que aparezcan elegantemente cuando hagamos hover sobre la imagen en cuestión. Es muy útil para tu portfolio, un catálogo de productos o una simple galería de fotos.

Empezaremos montando el código HTML. Creamos una cuadricula simple con listas desordenadas (<ul></ul>) en la que cada elemento de la lista contendrá la imagen y la información dentro de la etiqueta <figcaption>

<ul class="grid cs-style">
    <li>
        <figure>
            <img src="img/foto-01.png" alt="elemento 01">
            <figcaption>
                <h3>Retrato B/N</h3>
                <span>Federico Rocamora</span>
                <a href="http://www.portfolio.com/federico-rocamora">Comprar foto</a>
            </figcaption>
        </figure>
    </li>
    <li>
        <figure>
            <!-- otros elementos -->
        </figure>
    </li>
</ul>

CSS3: dando forma

Lo primero es darle algo de estilo a la parrilla básica que hemos creado y los elementos <li>

.grid {
    list-style: none;
    max-width: 1300px;
    margin: 0 auto;
    padding: 20px 20px 100px 20px;
    text-align: center;
}
 
.grid li {
    display: inline-block;
    margin: 0;
    padding: 20px;
    position: relative;
    text-align: left;
    width: 400px;
}

Los elementos del listado se irán colocando uno junto al otro con el inline-block y además, nos permite centrar el texto fácilmente con el text-align: center
Teniendo en cuenta que la etiqueta <figcaption> se posicionará de manera absoluta, tenemos que delimitar su posición ajustando el <figure> con position: relative. Además, vamos a ocultar todo lo que quede fuera de la capa.

.grid figure {
    margin: 0;
    overflow: hidden;
    position: relative;
}

Cómo deciamos, nuestro <figcaption> aparecerá de manera absoluta. En un primer instante vamos a dejarlo completamente transparente, pero ya definimos mediante los parametros transform y transition de CSS3 que aparecerá desde abajo a una determinada velocidad. Además, le damos algunos estilos básicos: fondo, 100% de ancho, etc. y los estilos de los elementos que van en el interior

.grid figcaption {
    background: #f29400;
    bottom: 0;
    color: #FFFFFF;
    height: 80px;
    left: 0;
    opacity: 0;
    padding: 20px;
    position: absolute;
    top: auto;
    transform: translateY(100%);
    transition: transform 0.4s, opacity 0.1s 0.3s;
    width: 100%;
}
.grid figcaption h3 {
    color: #fff;
    margin: 0;
    padding: 0;
}
 
.grid figcaption span:before {
    content: 'de ';
}
 
.grid figcaption a {
    background: #f7f7f8;
    color: #f29400;
    display: inline-block;
    padding: 5px 10px;
    text-align: center;
}

Para conseguir el efecto deseado, tenemos que añadir un poco de código para la imagen. Concretamente, al igual que antes, un tiempo de transition y un efecto determinado cuando se produzca el hover con transform

.grid figure img {
    display:block;
    max-width:100%;
    position:relative;
    transition: transform 0.4s;
}
 
.grid figure:hover img {
    transform: translateY(-50px);
}

Y ya, con todo preparado y la imagen lista para la acción, solo nos queda mostrar la información que tenemos en nuestro elemento <figcaption>. Le cambiamos la opacidad para que sea visible y definimos los tiempos que va a tomar la acción

.grid figure:hover figcaption {
    opacity: 1;
    transform: translateY(0px);
    transition: transform 0.4s, opacity 0.1s;
}

Y listo. Unas pocas lineas de CSS y tenemos preparado un efecto visualmente muy llamativo  que puede marcar diferencias.

Descargar ejemplo