Efeito Flower

Via:: Ultra Downloads

Hoje trago um tutorial mais usado nas imagens de afiliados. O Efeito se chama Flower e os créditos vão ao GC (Gave Crazy) e ao KW (Kawaii World). Confira a preview e o codigo:

Preview

Procure o código </head> e acima dele, cole:

 <link href='http://static.tumblr.com/dlelfro/QJ2mh90b7/pisca2.css' media='screen' rel='stylesheet'/>

Agora  acima de ]]></b:skin>, cole:

.flower img{
padding:1px;
 -webkit-filter: opacity(78%);
border-top-left-radius:100px;
border-top-right-radius:100px;
border-bottom-left-radius:100px;
border-bottom-right-radius:10px;
border: 2px solid #FF4500;
 -webkit-transition-duration:2.0s;
}
.flower img:hover {
padding: 1px;
-webkit-animation-name: pisca;
-webkit-animation-duration: 1s;
 -webkit-transition-duration: 1.0s;
 -webkit-filter: opacity(100%);
border-top-left-radius:100px;
border-top-right-radius:100px;
border-bottom-left-radius:100px;
border-bottom-right-radius:100px;
border: 2px solid #FF6347;}

Consulte nossa tabela de Cores em HTML

Para o código pegar, basta criar uma nova gadget de HTML/JavaScript e colar:

<div class="flower"><a href="LINKBLOG"><img src="URLIMG" /></a></div> 

 Se você quiser que apareça o título (Caso você tenha tooltip personalizado igual ao do blog), é só copiar esse código ao invés do de cima:

<div class="flower"><a href="LINKBLOG" title="TITULO"><img src="URLIMG" /></a></div>