Oi meus amores vim desejar a vocês , uma feliz Ano Novo com paz , harmonia , felicidade , amor
diversão e tudo de bom ! Vocês merecem :) vamos ao feito :
Click aqui para ver o efeito
Eu acho ele o máximo !
Vá em seu Html e procure por → ]]></b:skin>
Agora acima da tag ]]></b:skin> cole :
.qitem { width:93px; height:93px; border:4px solid #COR DA BORDA; margin:2px 0px 2px 4px; background: url('http://static.tumblr.com/b1gnlwd/D6gm3btai/bg.gif') no-repeat; overflow:hidden; position:relative; float:left; cursor:hand; cursor:pointer;}
.qitem img { border:0; position:absolute; z-index:200;}
.qitem .caption { position:absolute; z-index:0; color:#ccc; display:block; width: 93px; text-align: center; margin-top: 23px;}
.qitem .caption h4 { font-size:12px; padding:10px 5px 0 8px; margin:0; color:#ff4d4d;}
.qitem .caption p { font-size:10px; padding:3px 5px 0 8px; margin:0;}
.bar1, .bar2, .bar3, .bar4 { position:absolute; background-repeat: no-repeat; z-index:200;}
.clear { clear:both;}
Faça as alterações , visualize e se estiver tudo certo Salve !
Agora em um gadget → Html-JavaScript cole :
<script src="http://static.tumblr.com/b1gnlwd/OX1m3bgeu/jquery-1.3.1.min.js"></script><script src="http://static.tumblr.com/b1gnlwd/Gndm3bgdn/jquery.easing.1.3.js"></script><script>
$(document).ready(function() {
//Custom settings var style_in = 'easeOutBounce'; var style_out = 'jswing'; var speed_in = 800; var speed_out = 300;
//Top and bottom var top = $('.qitem').height() * (-1); var bottom = $('.qitem').height();
$('.qitem').each(function () {
//retrieve all the details of the image before removing it url = $(this).find('a').attr('href'); img = $(this).find('img').attr('src'); alt = $(this).find('img').attr('img'); width = $(this).width() / 4; height = $(this).height();
//remove the image and append 4 div into it $('img', this).remove(); $(this).append('<div class="bar1"></div><div class="bar2"></div><div class="bar3"></div><div class="bar4"></div>');
//set the image as background image to all the bars $(this).children('div').css('background-image','url('+ img + ')');
//Divide the image into 4 bars and rebuild the image $(this).find('div.bar1').css({bottom:0, left:0, width:width, height:height, backgroundPosition:'0 0' }); $(this).find('div.bar2').css({top:0, left:width, width:width, height:height, backgroundPosition:(width*-1) + 'px 0' }); $(this).find('div.bar3').css({top:0, left:width*2, width:width, height:height, backgroundPosition:(width*-2) + 'px 0' }); $(this).find('div.bar4').css({bottom:0, left:width*3, width:width , height:height, backgroundPosition:(width*-3) + 'px 0' });
}).hover(function () {
//Move those bar, 1st and 3rd move upward, 2nd and 4th move downward $(this).find('div.bar1').stop(false, true).animate({top:bottom}, {duration:speed_out, easing:style_out}); $(this).find('div.bar2').stop(false, true).animate({top:bottom}, {duration:speed_out, easing:style_out}); $(this).find('div.bar3').stop(false, true).animate({top:top}, {duration:speed_out, easing:style_out}); $(this).find('div.bar4').stop(false, true).animate({top:top}, {duration:speed_out, easing:style_out}); },
function () {
//Back to default position $(this).find('div.bar1').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in}); $(this).find('div.bar2').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in}); $(this).find('div.bar3').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in}); $(this).find('div.bar4').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in});
}).click (function () {
//make the whole box clickable window.location = $(this).find('a').attr('href'); });});
</script> <div class="qitem"> <a href="LINK DE REDIRECIONAMENTO" target="_blank"><img src="URL DA IMAGEM" alt="Test 1" title="" width="94" height="94"/></a> <span class="caption"><h4>TÍTULO DESEJADO</h4><p>SUBTITULO DESEJADO</p></span> </div>
Mude Apenas oque esta em negrito ! Caso queira mais imagens (no caso efeito em mais imagens)
Copie de <div class="qitem"> até </div> e cole de pois deste </div>
Assim
</script> <div class="qitem"> <a href="LINK DE REDIRECIONAMENTO" target="_blank"><img src="URL DA IMAGEM" alt="Test 1" title="" width="94" height="94"/></a> <span class="caption"><h4>TÍTULO DESEJADO</h4><p>SUBTITULO DESEJADO</p></span> </div>
<div class="qitem"> <a href="LINK DE REDIRECIONAMENTO" target="_blank"><img src="URL DA IMAGEM" alt="Test 1" title="" width="94" height="94"/></a> <span class="caption"><h4>TÍTULO DESEJADO</h4><p>SUBTITULO DESEJADO</p></span> </div>
Entenderam ?
Espero que tenham gostado
Créditos : Explodindo Glitter & Single Themes
Que efeito maneiro kk Fiquei passando o mouse em cima! Feliz 2013 pra vc tbm *0*
ResponderExcluir~> Seguindo aqui,poderia retribuir?Até♥
cotidianodeumabarbie.blogspot.com
Kk' Obrigada por seguir ! Sigo o seu sim :) Obrigada
ResponderExcluir