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>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <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>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .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.
1 2 3 4 5 | .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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | .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
1 2 3 4 5 6 7 8 9 10 | .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
1 2 3 4 5 | .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.
