Crazy Effect


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...

1 Comments

  1. Tati21 junho

    Eu amo efeitos com CSS! :D
    Hoje em dia tantas coisas são possíveis só com ela!

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up