quinta-feira, 8 de março de 2012

Passe o cursor

Add An Awesome Fixed Position Slide Open Heart Bookmarking Gadget To Blogger
 
.pulloutimage{ position: relative; } .pulloutimage img{ position: absolute; /* absolute position and stack images inside container */ left: 0; /* aquí estilos para el borde de la primera imagen */ } .pulloutimage img.ondemand{ /*CSS for image shown on demand */ 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{ /* keyframe animation that slides a DIV out from another before overlapping later */ 0%{ /* Start of animation */ z-index: -1; opacity: 0; } 50%{ /* Half way point, move image to right edge of container */ opacity: 1; z-index: -1; left: 100%; box-shadow: none; } 51%{ /* 51% point, stack animating image on top of original image */ z-index: 2; } 100%{ /* Final point, move animating image back so it's on top of original */ 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{ /* when mouse rolls over pulloutimage container, style to apply to "ondemand" image */ -webkit-animation-name:revealfromright; /* specify animation keyframe */ -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; /* aquí estilos para el borde de la segunda imagen */ } .pulloutimage:hover img.original{ /* when mouse rolls over pulloutimage container, style to apply to "original" image */ opacity:0.5; }