Este ejemplo CSS muestra cómo agregar un panel de descripción de animación a las imágenes que se desliza para abrirse cuando pones el ratón sobre la imagen, usando las transiciones de CSS3 . Al envolver la imagen dentro de un contenedor relativamente posicionado junto a una descripción DIV nueva aportación a la casa de la propia descripción, se puede deslizar la tarde a la vista usando la transformada de CSS3: la propiedad translate () .
Las cuatro direcciones de deslizamiento se muestran a continuación (arriba, abajo, derecha o izquierda). El inicio de la animación de deslizamiento tiene un retraso de 0,5 segundos cada vez que el uso de la propiedad de transición de retardo, por lo que se produce después de que la sombra de CSS 3 que se añade a la imagen para crear el efecto de una imagen en relieve.
El resultado es una imagen nueva con un panel Descripción de corredera que utiliza nada más que el HTML / CSS para crear el efecto.
La siguiente funciona mejor en un navegador moderno que soporte de transicion CSS3, es decir, IE10 +, FF3.5 +, Chrome / Safari y Opera 10. Navegadores menores como IE9 todavía verán la descripción onMouseover panel sólo la transicion san o neutral:
Ejemplos:
Capaz de acoger 50.000 espectadores, el Coliseo </ a> se utilizó para combates de gladiadores y espectáculos públicos, como las ejecuciones.
Como Implementar este truco de imagen con descripcion deslizable al mover el mouse sobre la misma:
1.Entramos a la interface de blogger
2.Vamos a plantilla>>Editar Html
3.Buscamos el siguiente codigo ]]></b:skin>
4.Pegamos el codigo de abajo despues/debajo de ]]></b:skin> y guardamos la plantilla.
<style>
.imagepluscontainer{ /* main image container */
position: relative;
z-index: 1;
}
.imagepluscontainer img{ /* CSS for image within container */
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease; /* Enable CSS3 transition on all props */
-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{ /* CSS for image when mouse hovers over main container */
-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); /* black bg with 80% opacity */
color: white;
-moz-border-radius: 0 0 8px 8px; /* CSS3 rounded borders */
-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); /* CSS3 shadows */
-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; /* 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 */
}
/*### Below CSS when applied to desc DIV slides the desc div from the right edge of the image ###*/
.imagepluscontainer div.rightslide{
width: 150px; /* reset from default */
top:15px;
right:0;
left:auto; /* reset from default */
bottom:auto; /* reset from default */
padding-left:15px;
-moz-border-radius: 0 8px 8px 0;
-webkit-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);
}
/*### Below CSS when applied to desc DIV slides the desc div from the left edge of the image ###*/
.imagepluscontainer div.leftslide{
width: 150px; /* reset from default */
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;
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);
}
/*### Below CSS when applied to desc DIV slides the desc div from the top edge of the image ###*/
.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;
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>
5.Luego copiamos y pegamos el codigo de abajo en editor html donde deseemos incluir una imagen con este efecto dentro de tu articulo por ejemplo
<!-- Asegúrese de que cada envase contiene atributos de anchura / altura explícitos que reflejen las dimensiones de la imagen a mostrar-->
<br />
<div class="imagepluscontainer" style="height: 199px; width: 263px; z-index: 2;">
<img src="http://img580.imageshack.us/img580/4546/stadiumij.jpg" />
<br />
<div class="desc">
Capaz de acoger 50.000 espectadores, el Coliseo <a href="http://en.wikipedia.org/wiki/Colosseum"> </ a> se utilizó para combates de gladiadores y espectáculos públicos, como las ejecuciones.
</a></div>
</div>
<br />
<div class="imagepluscontainer" style="height: 199px; left: 350px; width: 263px;">
<img src="http://img580.imageshack.us/img580/4546/stadiumij.jpg" />
<br />
<div class="desc rightslide">
Capaz de acoger 50.000 espectadores, el Coliseo <a href="http://en.wikipedia.org/wiki/Colosseum"> </ a> se utilizó para combates de gladiadores y espectáculos públicos, como las ejecuciones.
</a></div>
</div>
<br />
<div class="imagepluscontainer" style="height: 199px; width: 263px;">
<img src="http://img580.imageshack.us/img580/4546/stadiumij.jpg" />
<br />
<div class="desc upslide">
Capaz de acoger 50.000 espectadores, el Coliseo <a href="http://en.wikipedia.org/wiki/Colosseum"> </ a> se utilizó para combates de gladiadores y espectáculos públicos, como las ejecuciones..
</a></div>
</div>
<br />
<div class="imagepluscontainer" style="height: 199px; left: 350px; width: 263px;">
<img src="http://img580.imageshack.us/img580/4546/stadiumij.jpg" />
<br />
<div class="desc leftslide">
Capaz de acoger 50.000 espectadores, el Coliseo se utilizó para combates de gladiadores y espectáculos públicos, como las ejecuciones.</div>
</div>
Nota:Recuerda cambiar las imagenes por las tuyas y el mensaje deslizable. y listo.
0 comentarios:
Publicar un comentario