domingo, 5 de mayo de 2013

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

2 comentarios:

  1. Perdona ..¿Cuales son las opciones a editar que están en verde?...gracias por todas las buenas ideas que aportas.

    ResponderEliminar
    Respuestas
    1. ola fran, pues en verde he dejado para que editen * descripcion de la imagen, titulo de la imagen y url del boton Continuar leyendo, pero si quieres editar parte del css, ya sea color o estilos avisame y con gusto te ayudo...

      Eliminar

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 descripc...