Mostrar datos adicionales con algo de estilo y hover

Eso del estilo va porque vamos a jugar un poco con las propiedades CSS, no porque las sugerencias que planteo como ejemplos sean una virguería estética.

Se trata de algo tan sencillo y vistoso a la vez, como hacer aparecer información adicional sobre una imagen al pasar el puntero por encima de ella. Para esto vamos a echar mano de cosas que ya hemos visto en otras ocasiones. Básicamente z-index, position y opacity.

La teoría es que montamos una caja dentro de la cual irá una imagen con enlace y dentro del mismo enlace un span con los datos (texto). Como solaparemos esos elementos en el mismo espacio, el orden lo marcamos con z-index, de manera que el texto quede por encima de la imagen. Como inicialmente no queremos que se vea, le añadiremos también una opacidad (opacity:0;) haciéndolo inicialmente transparente (no visible).

El cambio vendrá con el hover sobre la caja principal, momento en el cual la transparencia será nula (bueno, casi) dejando ver los datos antes comentados.

En la práctica estamos hablando de algo así, pero luego lo complicaremos un poco más:

Abbey Road es una calle localizada en Westminster. Aunque hay más de 20 en Londres con el mismo nombre, la Abbey Road más conocida es la calle que corre de noroeste a sudeste a través del suburbio norte de Londres de St. John's Wood.
Es sobre todo famosa por el hecho de que los Abbey Road Studios de la EMI están localizados en el número 3, dónde muchos grandes músicos han grabado y también porque The Beatles llamaron así a uno de sus LP.
La famosa foto de la carátula del disco muestra a los cuatro miembros de la banda cruzando el paso de cebra localizado justo afuera de la entrada al estudio.

La explicación sobre el código CSS:

.caja {
position: relative; /*Para poder ubicar la info dentro de la caja*/
margin: 10px auto;
}
.caja img {
border:2px solid black;
}
.info {
position: absolute; /*Info sobre la imagen*/
top: 5%;
left: 10%; /*Desplazamos a partir de la esquina superior izquierda*/
zoom: 1;
filter: alpha(opacity=0); /*Opacidad Para IE */
opacity: 0; /*Inicialmente transparente */
padding: 5px;
color: white;
background: black;
-moz-transition:all ease .8s; /*Aplicamos una ligera transición*/
-webkit-transition:all ease .8s ;
transition:all ease .8s;
}
.caja:hover .info {
filter: alpha(opacity=80);
opacity: .8; /*Al hacer hover sobre la caja hacemos visible los datos*/
}

Con esto anterior en nuestra parte de estilo (entre las etiquetas skin) ya sólo tendremos que crear el HTML con esta estructura para que la cosa salga como en la demo:

<div class="caja"><a href="URL_ENLACE"><img src="URL_IMAGEN" /><span class="info">TEXTO</span></a></div>

---

Y con esa misma estructura podemos hacer otras cosas si cambiamos un poco el estilo y en lugar de sólo texto añadimos más cosas mediante un segundo span con una nueva clase. Pasa el puntero por esta otra imagen.

WHAT A WONDERFUL WORLD
Canción escrita por Bob Thiele y George D. Weiss y lanzada como sencillo en 1967MVSICAE MEMORANDVM

.caja2 {
position: relative;
width: 300px;
margin: 10px auto;
}
.caja2 img {
position: relative;
z-index:2; /*Imagen apilada en segunda posición*/
border: 1px solid #333;
box-shadow: 1px 1px 4px #333;
}
.disco {
position: absolute;
top:0;
left:0px;
z-index:1; /*La imagen del disco por debajo de la principal*/
display:block;
width: 300px;
height:300px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5O7dQ40jvmOb5KbF79I1ojqEwwbzZ2kEkt79pSkVcyaarQr1pCGBCtgnZtjpT3PUJFSzdHldFPGulabS9f92V-QLCPslmib72l5F8udAOqeNEY8HoyBjK-zy_6MKhX8ZXximJlTQ94c4/s300/vinilo.png") no-repeat scroll center center transparent;
-moz-transition:all linear 0.5s 0s;
-webkit-transition:all linear 0.5s 0s;
transition:all ease 0.5s 0s;
}
.info2 {
position: absolute;
z-index: 3; /*Los datos por encima de todo lo demás*/
top: 30%;
zoom: 1;
filter: alpha(opacity=0);
opacity: 0;
padding: 5px;
text-align: center;
color: #eee;
background: #333;
background: rgba(0,0,0,.7);
-moz-transition:all linear 0.5s 0s;
-webkit-transition:all linear 0.5s 0s;
transition:all ease 0.5s 0s;
}
.caja2:hover .info2, .caja2:hover .disco {
filter: alpha(opacity=100);
opacity:1;
}
.caja2:hover .disco {
left:100px; /*Para hacer "salir" parcialmente el disco*/
-moz-transform:rotate(180deg); /*Y además lo hace girando*/
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}

En el HTML añadimos un segundo span que tendrá como fondo la imagen del disco. En este caso debe tener el fondo transparente (GIF o PNG):

<div class="caja2"><a href="URL_ENLACE"><img src="URL_IMAGEN" /><span class="info2">TEXTO</span><span class="disco"></span></a></div>

---

Por último otra idea en la misma línea añadiendo un triangulito al rótulo, animándolo con un volteo y superponiendo una segunda imagen que aparece poco a poco. Como antes, hemos cambiado la opacidad para el efecto del rótulo, pero para el de la segunda imagen hemos jugado con un height inicial igual a cero.

A diferencia del anterior ejemplo, aquí la imagen "móvil" no será fija como sí que era el disco, así que no podemos ponerla como fondo (background). La añadiremos también con un span y la clase oportuna, pero con libertad de añadir la imagen que queramos desde allí.

LE PETIT IDÉE

Sweater: Burberry
Shirt: Zara (sale)
Coat: Zara- TRF (old)
Jeans: Zara
Espadrilles: Chanel

.caja3 {
position: relative;
width: 300px;
margin: 10px auto;
}
.caja3 img {
width: 300px;
border: 3px solid #333;
-moz-box-shadow: 1px 1px 4px #333;
-webkit-box-shadow: 1px 1px 4px #333;
box-shadow: 1px 1px 4px #333;
}
.info3 {
position: absolute;
top: 30%;
opacity: 0;
width: 200px;
height: 110px;
padding: 5px;
text-align: left;
color: #eee;
background: #C14684; /*Para IE que no soporta RGBA*/
background: rgba(193,70,132,.8);
-moz-transform:rotate(180deg); /*Inicialmente boca abajo*/
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
-moz-transition:all linear 0.5s 0s;
-webkit-transition:all linear 0.5s 0s;
transition:all ease 0.5s 0s;
}
.info3:after {
position: absolute;
top: 0;
right: -120px;
content:"";
display:block; /*Lo siguiente monta el triángulo*/
width:0;
height:0;
border-color:transparent transparent transparent #C14684;
border-color:transparent transparent transparent rgba(193,70,132,.8);
border-style:solid;
border-width:60px;
}
.imagen img {
position: absolute;
top:0;
border: 0;
height: 0; /*Segunda imagen no visible inicialmente*/
-moz-transition:all linear 0.5s 0s;
-webkit-transition:all linear 0.5s 0s;
transition:all ease 0.5s 0s;
}
.caja3:hover .info3 {
filter: alpha(opacity=100);
opacity: 1;
left:-100px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
.caja3:hover .imagen img {
top:0;
left:0;
height:450px !important;
border: 3px solid #333;
}

<div class="caja3"><a href="URL_ENLACE"><img src="URL_IMAGEN" /><span class="imagen"><img src="URL_IMAGEN2" /></span><span class="info3">TEXTO</span></a></div>

A partir de aquí el resto de posibles variaciones os las dejo a vosotros ;)

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter