Mostrar texto sobre una imagen al hacer :hover con CSS

Si tenemos una galería de fotos hermosas, no queremos opacarlas con texto y datos técnicos. Si este es tu caso, colocar el texto en una div invisible es la solución. Con CSS podremos lograr que se muestre esta información solamente cuando el visitante se posiciona sobre la fotografía.

Comenzamos con una lista desordenada donde colocaremos las imágenes y los datos. Dentro del contenedor oculto podremos añadir todo el HTML que deseemos para poder darle una estructura más ordenada a la información.

Con la técnica detallada a continuación podrán mostrar el texto y todos los datos que deseen sobre la imagen al hacer hover solamente utilizando CSS. Esta técnica es compatible con todos los navegadores modernos.

Demo

HTML

<ul>
 <li>
 <img src="images/cat_1.jpg">
 <div class="info">
 <h3>Tony's Cat</h3>
 <p>Foto tomada por <a href="http://www.flickr.com/people/evapro/">Eva Prokop</a></p>
 <p><small>Tomada el 7 de enero de 2007 con una cámara Nikon D70s</small></p>
 <p>EXIF: <span class="exif">1/60</span> <span class="exif">ƒ/4.5</span> <span class="exif">50 mm</span></p>
 </div>
 </li>
 ...
 </ul>

Como pueden apreciar, dentro de cada elemento <li> coloqué la imagen y el contenedor oculto.

Dentro del contenedor oculto de cada elemento de lista podré colocar la información correspondiente a la fotografía y darle formato con etiquetas HTML. En este caso agregué el título de la foto, el nombre y enlace al perfil de Flickr del fotógrafo, la fecha en que la foto fue tomada, la cámara usada y las características EXIF.

CSS

ul {
 padding: 0;
 margin: 0;
 list-style-type: none;
 }

Ya que esta será la única lista desordenada de mi página, reseteo el estilo de ul allí mismo. Quito el padding, el margin y el estilo de lista ya que no necesito que cada foto esté marcada con una viñeta — si esta no fuera la única lista lo más recomendable es hacer un reset general al inicio –.

li {
position: relative;
float: left;
width: 320px;
height: 255px;
overflow: hidden;
margin: 0 15px 15px 0;
}

Es importante aplicar position: relative a los elementos de lista porque esto nos permitirá ubicar nuestra información con posición absoluta dentro de cada elemento de lista en el paso siguiente.

ESTILO DE LA DIV OCULTA

.info {
 display: none;
 position: absolute;
 bottom: 0;
 z-index: 10;
 background: rgba(0, 0, 0, 0.5);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50000000,endColorstr=#50000000);
 width: 300px;
 color: #FFF;
 padding: 10px;
}

Para que este contenedor esté oculto hasta que nos posicionemos con el mouse sobre él, es necesario que tenga display: none. Sobreescribiremos este atributo en el próximo paso.

Le daremos estilo a nuestra div como si estuviera visible. Ya que estamos mostrando texto sobre la imagen, le añadiremos position: absolute y un valor de posición para ubicarlo dentro del elemento libottom: 0. También configuramos z-index en un valor positivo para evitarnos problemas con otros elementos del sitio que puedan pasar por arriba de este pie de imagen.

La información de cada fotografía en mi galería se verá en la parte inferior de la imagen y ocupará todo su ancho.

El fondo transparente sin imágenes puede ser alcanzado utilizando colores RGBa en los navegadores modernos y filter para el querido IE8. El color de fondo será negro #000000 — 0, 0, 0 en RGB — y su opacidad será de 50%. En el color RGBa marcamos la opacidad con un número decimal: 0.5 y en el filter con código hexadecimal #50XXXXXX (las X marcan la posición del color, después de la opacidad).

li:hover .info {
display: block;
}

Hacer visible nuestra información oculta es sencillo: solamente tenemos que aplicar el selector correcto y sobreescribir el atributo display de la div. En este caso cuando hacemos hover en li (li:hover) hacemos visible la div .info con display: block.

Demo
Scroll to top