Outro código que dá um belo efeito nas imagens.
Vitória do Brasil
Copie o código e cole-o no editor de textos (onde você faz os posts) no modo "Editar HTML". Vc poderá colocar várias imagens, mas basta no entanto repetir o código que está na cor azul
<div class="figure">
<img src="ENDEREÇO DA IMAGEM" /><br />
ESCREVA AQUI</div>
<style>
/* en el div contenedor se verá la imagen en forma de miniatura */
.figure {
background-color: #FFF;
border: 10px solid #FFF;
left:40%; /* la posición en la pantalla es la parte engorrosa del asunto */
position: relative;
width:120px; /* tamanho da miniatura */
-moz-box-shadow: 0 3px 10px #CCC; /* sombra no Mozilla e Chorme */
-webkit-box-shadow: 0 3px 10px #CCC;
-moz-transform: rotate(3deg); /* lo rotamos levemente en Mozilla y Chorme */
-webkit-transform: rotate(3deg);
}
/* la imagen */
.figure img { width:100%; }
/* el texto */
.figure span {
display: block;
text-align: center;
/* cualquier otra propeidad, color, tamaño y tipo de fuente, etc */
}
/* el efecto al poner el cursor encima */
.figure:hover {
z-index: 9999;
/* eliminamos la rotación y ampliamos la imagen por ejemplo tres veces */
-webkit-transform: rotate(0deg) scale(3);
-moz-transform: rotate(0deg) scale(3);
}
</style>
Gracias Vagabundia ;-)
Outros efeitos AQUI
Magnífico esse efeito. Obrigado por compartilhar com a gente.
ResponderExcluirEle serviu como uma luva para um projeto meu. Realmente obrigado Elke.