Imagen con descripción oculta CSS

Imagen con descripción oculta CSS
Nivel: Avanzado

A continuación les voy a mostrar cómo se le agrega el efecto de una descripción oculta a las imágenes.


Wallpaper incluido en el tema "Wallpapers Varios 3" Ir al Tema



Wallpaper incluido en el tema "Wallpapers Paisajes 2" Ir al Tema



Wallpaper incluido en el tema "Wallpapers Hombres 2" Ir al Tema



Wallpaper incluido en el tema "Wallpapers Mujeres 7" Ir al Tema
Primero debemos agregar el siguiente estilo en nuestra plantilla sobre la etiqueta </head>, la ruta sería: Plantilla / Editar HTML / Clic sobre "Plantilla de Formato".

<style>

.imagepluscontainer{ 
position: relative;
z-index: 1;
}

.imagepluscontainer img{ 
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease; 
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.imagepluscontainer:hover img{ 
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}

.imagepluscontainer div.desc{ /* CSS for desc div of each image. */
position: absolute;
width: 90%;
z-index: 1;
bottom: 0;
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8); /* black bg with 80% opacity */
color: white;
-moz-border-radius: 0 0 8px 8px; /* CSS3 rounded borders */
-webkit-border-radius: 0 0 8px 8px;
-ms-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0; /* Set initial opacity to 0 */
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 shadows */
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-ms-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s; /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}

.imagepluscontainer div.desc a{
color: white;
}

.imagepluscontainer:hover div.desc{ /* CSS for desc div when mouse hovers over main container */
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1; /* Reveal desc DIV fully */
}

.imagepluscontainer div.rightslide{
width: 200px;  /* Ancho de la caja de la descripción a la derecha */ 
top:15px;
right:0;
left:auto;  
bottom:auto;  
padding-left:15px;
-moz-border-radius: 0 8px 8px 0;
-webkit-border-radius: 0 8px 8px 0;
-ms-border-radius: 0 8px 8px 0;
border-radius: 0 8px 8px 0;
}

.imagepluscontainer:hover div.rightslide{
-moz-transform: translate(100%, 0);
-webkit-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
-o-transform: translate(100%, 0);
transform: translate(100%, 0);
}

.imagepluscontainer div.leftslide{
width: 200px;  /* Ancho de la caja de la descripción a la izquierda */
top:15px;
left:0;
bottom:auto;  /* reset from default */
padding-left:15px;
-moz-border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
-ms-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
}

.imagepluscontainer:hover div.leftslide{
-moz-transform: translate(-100%, 0);
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);
transform:translate(-100%, 0);
}

.imagepluscontainer div.upslide{
top:0;
bottom:auto;  /* reset from default */
padding-bottom:10px;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
-ms-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}

.imagepluscontainer:hover div.upslide{
-moz-transform: translate(0, -100%);
-webkit-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
-o-transform: translate(0, -100%);
transform:translate(0, -100%);
}

</style>

Importante: Las imágenes deben tener realmente las medidas que se definan en los códigos.

Ahora solo debemos agregar el código que vayamos a usar con la url de nuestra imagen y su descripción, ya sea en una entrada en modo HTML (si se pasa a modo redactar se perderán los efectos), o en un gadget HTML Javascript. Las medidas de width y height de los códigos son como ejemplo, las pueden editar a su gusto. Las que usé para las imágenes de este tema fueron width="250" y height="140". Para la parte de left dejé 270px. 

Código del efecto de la descripción oculta en la parte de abajo de la imagen:

<div class="imagepluscontainer" style="width:263px; height:199px; z-index:2">
<img src="URL de la imagen.jpg" />
<div class="desc">
Aquí va la descripción o texto. Ejemplo con un enlace <a href="http://www.charkleons.com/" target="_blank">Charkleons.com</a> reemplaza la url y su texto.
</div>
</div>

Código del efecto de la descripción oculta en la parte derecha de la imagen:

<div class="imagepluscontainer" style="width:263px; height:199px">
<img src="URL de la imagen.jpg" />
<div class="desc rightslide">
Aquí va la descripción o texto.
</div>
</div>

Código del efecto de la descripción oculta en la parte de arriba de la imagen:

<div class="imagepluscontainer" style="width:263px; height:199px">
<img src="URL de la imagen.jpg" />
<div class="desc upslide">
Aquí va la descripción o texto.
</div>
</div>

Código del efecto de la descripción oculta en la parte izquierda de la imagen. En la primera línea se coloca left:350px para darle esa distancia desde el borde izquierdo de la entrada hasta la imagen. Para este efecto sí se recomienda dejar esa parte o ajustarla de acuerdo al ancho de la entrada, ya que el efecto de la descripción oculta se desplaza hacia la izquierda:

<div class="imagepluscontainer" style="width:263px; height:199px; left:350px">
<img src="URL de la imagen.jpg" />
<div class="desc leftslide">
Aquí va la descripción o texto.
</div>
</div>

Tips: ■ Si por ejemplo desean usar el código con el efecto que se muestra arriba o abajo en la parte de la derecha de la entrada, deben agregarle el left:350px al código. Para el efecto que se muestra abajo deben agregar un (;) ya que antes iría un z-index:2 Para el efecto que se muestra arriba pueden agregar el left:350px sin (;) pero tendrían que agregárselo al height. Es decir, como notarán, los valores deben ir separados por un (;) excepto el último. 

■ Si desean dejar con color el enlace pueden hacerlo de la misma forma que se haría con un enlace normal en HTML. Ejemplo:

<div class="imagepluscontainer" style="width:263px; height:199px; left:350px; z-index:2">
<img src="URL de la imagen.jpg" />
<div class="desc">
Aquí va la descripción o texto. Ejemplo con un enlace <a href="URL del enlace" target="_blank"><span style="color: cyan;">Ir al Tema</span></a> reemplaza la url y su texto.
</div>
</div>

Eso sería todo, espero que esta información les sea muy útil.

Gracias.

efecto css para una descripción oculta en las imágenes de blogger, efecto original para las imágenes en blogger, efecto para ocultar texto en las imágenes, efecto para hacer salir una descripción de las imágenes al pasar el mouse o ratón sobre ellas, efecto css para imágenes en blogger,