IMÁGENES CON DESCRIPCIÓN DESLIZANTE INFERIOR.

IMÁGENES CON DESCRIPCIÓN DESLIZANTE INFERIOR. 

Vamos a ver como añadir un texto que describa una imagen que hemos puesto en el blog, con la particularidad de que esta descripción está oculta. Al pasar el cursor del ratón por encima de la imagen, esta aumenta un poco (con la propiedad transform) y por debajo asoma la descripción estomáticamente.

 Todo esto es posible gracias a la evolución del CSS (llamada CSS3), sin códigos Javascript ni nada de nada.

Aquí tienes un ejemplo con 2 imágenes. Pasa el cursor por encima de ellas:

Para poner este efecto en nuestro blog, lo primero que tenemos es que añadir el CSS en la plantilla, antes de </head>. Lo que está en rojo es el ancho de la descripción, que por lo general tiene que ser igual que el de la imagen.

Para implementarlo en vuestro Bloc solo tenéis que seguir estos pasos:

 Un clic en “Plantilla”

 Un clic en “Editar HTML”

 Ahora se te abrirá el Editor HTML de tu plantilla

En  este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,

debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,

  Busca el siguiente código

</head>

Ahora justo encima (ó antes) de esa etiqueta, pegamos lo siguiente:

<style>
.imagepluscontainer{
position: relative;width: 250px;
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; /* Set z-index to that less than image's, so it's hidden beneath it */
bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8); color: white;
-moz-border-radius: 0 0 8px 8px;-webkit-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);
-webkit-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;
-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{
-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 */
}
</style>

Una vez hecho esto, cada vez que queráis añadir este efecto en una imagen, ponéis el siguiente código, poniendo la url de la imagen, la descripción y el tamaño donde esta indicado en rojo.

<div class="imagepluscontainer" style=" z-index: 2;">
<img src="URL IMAGEN" height="250" width="250" /><div class="desc">DESCRIPCION</div></div>

Data de la Publicación; 02-09-2019

 Fuente; redeando

 Publicado por;