TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN

Superponer dos imágenes con efecto deslizante.

Añadiremos una imágen en el blog de tal forma que al posicionar el ratón sobre la misma se coloque una segunda encima, todo esto realizado con un efecto deslizante:













Como lo lógico es que la queramos poner en lugares puntuales como una entrada o un gadget html  ahí insertaremos el siguiente código:
<div class="pulloutimage">
<img class="original" src="url imagen original" style="height: 199px; width: 263px;"  />
<img class="ondemand" src="url imagen secundaria" style="height: 199px; width: 263px;" width:="" /> </div>

<style>
.pulloutimage{
position: relative;
}

.pulloutimage img{
position: absolute;
left: 0;
/*estilos para el borde de la primera imagen */
}

.pulloutimage img.ondemand{
opacity: 0;
visibility: hidden; /* hide it initially (mainly for legacy browsers)
}

.pulloutimage img.original{
z-index: 1; /* set base z-index of initially shown image */
}

@-webkit-keyframes revealfromright{
0%{ /* animación */
z-index: -1;
opacity: 0;
}
50%{
opacity: 1;
z-index: -1;
left: 100%;
box-shadow: none;
}
51%{
z-index: 2;
}
100%{
left: 0;
box-shadow: 8px 8px 15px gray;
}
}

@-moz-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}

@-ms-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}

.pulloutimage:hover img.ondemand{
-webkit-animation-name:revealfromright;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;

-moz-animation-name:revealfromright;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 1;

-ms-animation-name:revealfromright;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: 1;

animation-name:revealfromright;
animation-duration: 1s;
animation-iteration-count: 1;

visibility:visible;
opacity:1;
box-shadow: 8px 8px 15px gray;/* esto es la sombra */
z-index:2;
/* estilos para el borde de la segunda imagen */
}

.pulloutimage:hover img.original{
opacity:0.5;
}
</style>

Sustituir lo que está en rojo por la url de las imágenes y lo que está en azul correspondera a la altura y anchura de cada una de ellas.

0 comentarios:

Entradas populares

Colaboro En:

textoalternativo textoalternativo textoalternativo

Atención

Los comentarios serán publicados una vez hayan sido moderados, disculpen las molestias.

Este blog es informativo y de caracter educativo, el administrador del mismo no se responsabiliza del uso fraudulento o ilegal que otras personas hagan del contenido publicado en él.

Así mismo si alguien cree que se vulnera algún derecho se ruega ponerlo en conocimiento para que se subsane de forma inmediata.