Efeito zooming

Ohayou ^^

De volta com um tutorial, também a pedido de uma leitora, ensinarei um efeito chamado zooming. Consiste numa imagem que, ao passar o rato, aumenta ligeiramente e fica tão translúcida que deixa ver o texto por trás, tipo uma legenda. Lembro-me que aprendi o tutorial no blog Bunny Crazy, modifiquei ligeiramente as cores e a organização, mas é justo eu colocar os créditos aqui. Pode parecer um pouco extenso, mas é simples de usar.

Prévia: www

Tutorial:

Procure por:

/b:skin

Acima acrescente o código seguinte e faça as alterações de cor que quiser:

#zooming { /*imagem inicialmente*/
width: 225px;
height: 127px;
display: inline-block;
position:relative;
}
#zooming img { /*imagem inicialmente*/
position: absolute;
width: 225px;
height: 127px;
-webkit-transition-duration: .80s;
}
#zooming:hover img{ /*transformação da imagem*/
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
opacity: 0.1;
-webkit-transition-duration: .70s;
}
.zoomingout { /*enquadramento da imagem*/
float: center;
width: 225px;
height: 127px;
padding: 2px;
border: 1px solid #cfb999;
overflow: hidden;
-webkit-transition-duration: .59s;
}
.zoomingout:hover { /*enquadramento da imagem em hover*/
float: center;
width: 225px;
height: 127px;
padding: 2px;
border: 1px solid #d7e6a1;
overflow: hidden;
-webkit-transition-duration: .59s;
}
#palavras a.header { /*título*/
width: 225px;
height: 127px;
opacity: 1;
margin-left: -1px;
text-align: center;
color: #8dc994;
font-size: 10px;
padding: 5px 5px 10px 5px;
}
#palavras { /*texto restante*/
width: 225px;
height: 127px;
opacity: 1;
margin-left: -1px;
text-align: center;
color: #b0966f;
font-size: 10px;
padding: 5px 5px 10px 2px;
}

Para usar, adicione um gadget HTML/Javascript. Adicione o código:

<div id="zooming" class="zoomingout">
<img src="URL-DA-IMAGEM" class="image4" />
<div id="palavras"><a href="LINK" class="header">TÍTULO</a>
<br /><div align="justify">
TEXTO TEXTO TEXTO TEXTO TEXTO
</div></div></div>

E pronto, agora é só substituir o texto, a url da imagem, o título e o link. Se não quiser colocar link, basta apagar as partes que dizem href="LINK" , sem apagar a parte que diz <a class="header">, e </a>. Relembrando que as cores podem ser alteradas no html do blog. Se eventualmente você alterar algo mais do que as cores, como espessura das bordas e tal, eu agradecia se creditassem a base do tutorial aqui ao blog, porque as explicações são inteiramente minhas.

Jaa!