Vamos começar adicionando o css
Demonstração
procure por ]]></b:skin> adicone o código abaixo, acima dela;
/* Efeitos */
.efeitobox{
float:left;
margin:5px;
width:170px;
height:230px;
border:2px solid #555;
overflow:hidden;
}
.details{
width:170px;
height:230px;
font-family: Arial;
background:#000;
color:#fff;
font-size: 11px;
text-align:left;
}
#efeito-1 img {
-webkit-transform: scale(1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#efeito-1 img:hover{
-webkit-transform: scale(.5);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#efeito-2 img {
opacity: 1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#efeito-2 img:hover{
opacity: .5;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#efeito-3{position:relative;}
#efeito-3 img{
opacity:1
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#efeito-3 .details{
position:absolute;
top:0;
left:0;
opacity: 0;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#efeito-3 .details:hover{
opacity: .9;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#efeito-4{position:relative;}
#efeito-4 img{
position:absolute;
top:0;
left:0;
-webkit-transition: margin-left;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#efeito-4:hover img{
margin-left:200px;
}
#efeito-4 .details{
position:absolute;
top:0;
left:0;
z-index:-1;
}
#efeito-5{position:relative;}
#efeito-5 .details{
opacity: .9;
position:absolute;
top:0;
left:0;
margin-left:-200px;
-webkit-transition: margin-left;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#efeito-5:hover .details{
margin-left:0;
}
#efeito-5 img{
position:absolute;
top:0;
left:0;
z-index:0;
}
#efeito-6{
position:relative;
}
#efeito-6 img{
position:absolute;
top:0;
left:0;
z-index:0;
}
#efeito-6 .details{
opacity: .9;
position:absolute;
top:100;
left:150;
z-index:999;
-webkit-transform: scale(0);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
}
#efeito-6:hover .details{
-webkit-transform: scale(1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
}
a.classe2:link, a.classe2:visited {
text-decoration: none
font-family: Arial;
font-size: 11px;
color: #fff;
}
a.classe2:hover {
text-decoration: underline;
font-size: 11px;
font-family: Arial;
color: #fff;
}
Agora ao html adicione o código abaixo ao gadget html/Javascript ou na postagem só você escolher o efeito e ir substituindo onde tem que substituir ^^<!-- Efeito 1 -->
<div id="efeito-1" class="efeitobox">
<img height="ALTURA DA IMAGEM" width="LARGURA DA IMAGEM"src="LINK DA IMAGEM"/>
</div>
<!-- Efeito 2 -->
<div id="efeito-2" class="efeitobox">
<img height="ALTURA DA IMAGEM" width="LARGURA DA IMAGEM" src="LINK DA IMAGEM"/>
</div>
<!-- Efeito 3 -->
<div id="efeito-3" class="efeitobox">
<img height="ALTURA DA IMAGEM" width="LARGURA DA IMAGEM" src="LINK DA IMAGEM"/>
<div class="details">
<h2>TITULO</h2>
<p>TEXTO<br/>
<a class="classe2" href="LINK DO LEIA MAIS">Leia mais...</a></p>
</div>
</div>
<!-- Efeito 4 -->
<div id="efeito-4" class="efeitobox">
<img height="ALTURA DA IMAGEM" width="LARGURA DA IMAGEM" src="LINK DA IMAGEM"/>
<div class="details">
<h2>TITULO</h2>
<p><b>TEXTO<br/>
<a class="classe2" href="LINK DO LEIA MAIS">Leia mais...</a></p>
</div>
</div>
<!-- Efeito 5 -->
<div id="efeito-5" class="efeitobox">
<img height="ALTURA DA IMAGEM" width="LARGURA DA IMAGEMpx" src="LINK DA IMAGEM"/>
<div class="details">
<h2>TITULO</h2>
<p><b>TEXTO<br/>
<a class="classe2" href="LINK DO LEIA MAIS">Leia mais...</a></p>
</div>
</div>
<!-- Efeito 6 -->
<div id="efeito-6" class="efeitobox">
<img height="ALTURA DA IMAGEM" width="LARGURA DA IMAGEM" src="LINK DA IMAGEM"/>
<div class="details">
<h2>TITULO</h2>
<p><b>TEXTO<br/>
<a class="classe2" href="LINK DO LEIA MAIS">Leia mais...</a>
<br/></p>
</div>
</div>
Entendo o Código
para você alterar o tamanho da imagem e descrição procure por
.efeitobox{
float:left;
margin:5px;
width:170px;
height:230px;
border:2px solid #555;
overflow:hidden;
}
.details{
width:170px;
height:230px;
font-family: Arial;
background:#000;
color:#fff;
font-size: 11px;
text-align:left;
}
e coloque no mesmo tamanho o width e height do efeitobox e details não esqueça de colocar o mesmo tamanho no html para a imagem se redimensionar automáticamente sem precisar mudar o tamanho no photoshop, photofiltre, etc.... o color do details é a cor da fonte se quiser mudar pode mudar o background é o fundo , border 2px solid #555 é a cor da borda e o 2 px o tamanho da mesma ,margin:5px; é o tamanho da distancia que vai ter dentre as imagens, text-align:left é o lado que o texto vai ficar lembre-se left esquerda, right a direita e center no centro.
Bom é isso galera espero que este tutorial seja de grande utilidade a vocês e até a próxima ^^.
UOU, vou usar no meu próximo Template. =DDDD
ResponderExcluirvinneh vou usa tb =3
ResponderExcluir^^
ResponderExcluir