Descripcion en imagenes con efecto deslizante usando css

Una forma de agregarle mas estilo a nuestras imágenes y hacer que nuestro blogs sea mas profesional, es poniendo una pequeña descripción de la imagen, Aunque en esta ocasión lo hacemos mas interesante.

¿como?

Simple haremos que la descripción aparezca cuando los usuarios coloque el cursor sobre la imagen, ademas le agregaremos un botón para que los usuarios puedan leer el articulo completo, puedes ver este blogs de pruevas

Para agregar imágenes de esta forma simplemente, ve a Diseño, a Añadir Gadget, HTML/Javascript y pega lo siguiente:

<style>

.image-box {

  width:220px;height:220px;overflow:hidden;background-color:white;

  border:1px solid #ccc;float:left;margin:1px 1px;

  font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;

  color:#333;

}

.image-container,

.image-details {height:280px;border:5px solid white;background-color:#ffc;

  transition:margin-top .4s ease-out .4s;

}

.image-container img {

  width:280px;height:280px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none;

  max-height:none;

  background-color:black;

}

.image-details h4,

.image-details p {

  margin:0 0 .2em;padding:0 0;height:70px;

}

.image-details h4 {

  font-size:120%;height:auto;

}

.image-details .details {

  padding:10px 12px;overflow:hidden;

}

.image-details .more {

  color:white;text-decoration:none;display:block;

  text-align:center;font-weight:bold;background-color:#f9a;height:26px;line-height:26px;margin:10px 0 0;

}

.image-box:hover {border-color:#bbb; width:220px;

  height:220px;}

.image-box:hover .image-container {margin-top:-210px}

.image-details .more:hover {background-color:black}

</style>

<br />

<div class="image-box-wrapper" id="image-box-wrapper">

<div class="image-box">

<div class="image-container">

<img alt="Food" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL5rTO06Kvxpo-iv96HtOXG-htxIWM5uYJZ6WMywkUzlFrep5sTC7aqeoyT77jIkys2rKx-xgVIOh8pYg7YxTHlDmMGvT0yhK8PJF9W7QTVHpm1lx98keFEUoz1CPi47w2sqZhiBRR9KU/s1600/3.jpg" width="280" /></div>

<div class="image-details">

<div class="details">

<h4>

Descripccion deslizante </h4>

Una pequeña demostracion de una descripccion deslizante en una imagen en blogger

<a class="more" href="http://www.blogger.com/Post%20Link">Continuar Leyendo</a></div>

</div>

</div>

</div>

En color verde he dejado las opciones a editar.

En color rojo, el url de la imagen