.post-body:first-letter { float:left; color: #333333; font-size:100px; font-family:none; line-height:80px; padding-top:1px; padding-right:5px; } font-style: italic; } span.letracapital{ float: left; font-size: 40px; line-height: 35px; /* Dobla el alto de linea menos 1 pixel */ font-family: Georgia, "Times New Roman", Times, serif; color: #2583ad; /* Azul */ padding-right: 5px; } -->

Recent Posts

Transición de imágenes CSS

5 feb 2019
Hoy vamos a mostraros como podemos hacer una
transición de imágenes para nuestro blog, con CSS.
Para ello, solo tenemos que añadir a nuestro blog este código CSS,antes de
]]></b:skin>


a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 550px; /* anchura de la imagen */
height: 434px; /* altura de la imagen */

}

a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.5s ease; /* enable transition */
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
z-index: 2;
clip: rect(0,550px,434px,0); /* clip values should be rect(0,image_width,image_height,0) */
}

a.nowandthen img:nth-of-type(2){ /* hide "after" image beneath "before" so it's initially out of view */
z-index: 1;
}

a.nowandthen:hover img:nth-of-type(1){ /* clip "before" image to reveal "after" */
clip: rect(0,0,434px,0); /* clip values should be rect(0,0,image_height,0) */
opacity: 0;
}

Mantenemos importancia a lo marcado en azul para cambiar el tamaño de las imágenes
Ahora podemos añadir nuestras imágenes tanto a un gadget como a un post.
Para ello usamos este código.

Cambiamos lo marcado en morado por la URl de nuestra imagen



<a class="nowandthen">
 <img src="Url-imagen-beforejt.jpg" alt="">
 <img src="Url-imagen-afteruc.jpg" alt="">
</a>

No hay comentarios:

Publicar un comentario

Deja tu comentario y en breve te contestaremos