22 de nov de 2010

Efeito nas imagens dos posts

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

Um comentário:

  1. Magnífico esse efeito. Obrigado por compartilhar com a gente.
    Ele serviu como uma luva para um projeto meu. Realmente obrigado Elke.

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube