Imagen con subtítulo superpuesto con opacidad

En este artículo vamos a aprender como disponer de una imagen con un subtítulo o caption superpuesto con opacidad al estilo Nivo Slider.

Para ello tan solo necesitaremos añdir un par de contenedores HTML y añadir unas clases CSS.

En nuestro <body> necesitaremos incorporar algo como lo siguiente:

<div class="banner">
    <img src="images/nightlife.jpg" />
    <div class="title">Caption de la imagen</div>
</div>

En este caso disponemos de un contenedor que contiene una imagen y su subtítulo o titular que tendrá el estilo particular siguiente:

.title {
    background: #000000;
    bottom: 0;
    top: 0;
    color: #FFFFFF;
    left: 0;
    opacity: 0.5;
    position: absolute;
    width: 620px;
    height:30px;
    padding:10px;
}

.title:hover {
    opacity: 1;
}

.banner {
    float:left;
    position: relative;
}

Fíjate que el truco para conseguir el efecto radica en que el contenedor padre, es decir el que tiene el class=»banner» está en position:absolute, en cambio el contenedor que contiene el titular está en position:relative y con opacidad que se restablece al pasar el ratón por encima de la capa.

En este caso tendremos el titular en la parte superior de la imagen, si quisieramos situarlo abajo, simplemente tendremos que cambiar el atributo top de la clase «title»

.title {
    background: #000000;
    bottom: 0;
    top: 430px;
    color: #FFFFFF;
    left: 0;
    opacity: 0.5;
    position: absolute;
    width: 620px;
    height:30px;
    padding:10px;
}

Ver los ejemplos en funcionamiento