Olá! Observando esse template, encontrei um efeito bem interessante e legal para ser aplicado a gadgets de Elite/Parceiros/Afiliados, ou menus, listas de marcadores...editei ao meu modo; trata-se de uma brincadeira meio maluca e ao mesmo tempo simples com CSS que fará com que as imagens girem, sejam ampliadas e mudem as bordas ao passar o mouse sobre elas. Veja o efeito passando o mouse nas imagens abaixo:
Como usar:
1. Cole isso em seu Modelo - Editar HTML - acima de /b:skin:
.imgcrazy {
background:url(URL-DA-IMAGEM);/* primeiro background */
width: 25%; /* tamanho inicial */
height: auto;
border-radius: 60px; /* borda arredondada inicial */
padding: 5px;
box-shadow: 2px 3px 4px #ccc;/* sombra */
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;
}
.imgcrazy:hover {
background:url(URL-DA-IMAGEM);/* segundo background */
width: 100%; /* imagem ampliada */
border-radius: 30px; /* borda arredondada */
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
2. Agora crie um novo gadget HTML/JavaScript e cole isso:
<img class="imgcrazy" src="URL-DA-IMAGEM"/>
Para imagens com links:
<a href="URL-DO-LINK" title="NOME-DO-LINK"><img class="imgcrazy" src="URL-DA-IMAGEM"/></a>
Salve e prontinho! Espero que gostem. Beijus...
Eu amo efeitos com CSS! :D
ResponderExcluirHoje em dia tantas coisas são possíveis só com ela!