Superponer contenidos usando CSS

Hay muchos scripts que utilizan efectos para cambiar el contenido de algo cuando ponemos el puntero del ratón encima. Es lo que se llama un efecto rollover. Con CSS lo logramos usando :hover. Cambiamos colores, fondos, las fuentes de los textos, etc ¿Podemos cambiar más cosas? ¿Podríamos cambiarlo por completo, incluyendo su contenido?

Pués así lo muestran en SNOOK.ca y la idea es bastante simple.

Este es un ejemplo del código HTML básico:

<div class="infobox">
  <img src="URL_imagen">
  <div> un texto visible </div>
  <div class="more"> y aquí ponemos el contenido que permanecerá oculto </div>
</div>

Y este es un estilo CSS de ejemplo:

.infobox {
  border: 1px solid #345;
  cursor: pointer;
  padding: 5px;
  position: relative;
  width: 130px;
}
.infobox img {
  position: relative;
  z-index: 2;
}
.infobox .more {
  display: none;
}
.infobox:hover .more {
  background-color: #345;
  border: 1px solid #89A;
  display: block;
  font-size: 20px;
  height: 130px;
  left: 0px;
  padding: 5px 20px 5px 140px;
  position: absolute;
  text-align: justify;
  top: 0px;
  width: 400px;
  z-index: 1;
}

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas hendrerit quam a elit luctus ut tempor leo congue? Maecenas blandit massa id mi blandit consectetur.

EL DIV infobox tiene la propiedad position establecida como relative lo que permite luego, posicionar su contenido de manera absoluta con left y top. La imagen también se posiciona de manera relativa para usar la propiedad z-index y, de esa manera, mantenerla visible aún cuando algo se coloca "encima" de ella.

Las propiedades a usar son variadas, dependerán de lo que se nos ocurra mostrar. Otro ejemplo:

.infobox {
  -moz-border-radius: 10px;
  background-color: #123;
  border: 2px solid #567;
  color: #ABC;
  cursor: pointer;
  font-size: 20px;
  padding: 5px 10px;
  position: relative;
  text-align: center;
  width: 180px;
}
.infobox .more {
  display: none;
}
.infobox:hover .more {
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  background-color: #101921;
  border: 2px solid #567;
  color: #EEE;
  display: block;
  font-size: 12px;
  left: -2px;
  padding: 5px 10px;
  position: absolute;
  text-align: justify;
  top: -2px;
  width: 180px;
  z-index: 1;
}

El contenido visible a expandir.

Aliquam mattis purus vel leo dignissim vel pulvinar lectus hendrerit! Aenean facilisis ante vel lacus interdum ut lobortis enim aliquet. Vivamus sagittis feugiat est id rhoncus? Maecenas ut leo vel enim mollis tempor. Nullam ornare fermentum tempor. Proin eu interdum massa!

Y un último ejemplo:

.infobox2 {
  color: #888;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  position: relative;
  text-align: center;
  width: 130px;
}
.infobox2 img {
  position: relative;
  z-index: 2;
}
.infobox2 .more {
  display: none;
}
.infobox2:hover .more {
  -moz-border-radius: 10px;
  background-color: #333;
  color: #BBB;
  display: block;
  font-size: 14px;
  font-weight: normal;
  height: 130px;
  left: 0px;
  padding: 15px 20px 10px 135px;
  position: absolute;
  text-align: justify;
  top:- 5px;
  width: 320px;
  z-index: 1;
}

EXPANDIR

Sed interdum interdum accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus fringilla aliquam lectus; laoreet accumsan magna vulputate eget. Aliquam vel quam mi.