Desculpem-me por não ter postado ontem e ante-ontem, eu estava fazendo 2 efeitos para postar para vocês *-* Eu ia postar os dois hoje, nesse mesmo post, mas achei melhor deixar um para cada dia, assim amanhã posto o outro (surpresa haha)
Bom, ainda não estou muito boa com essa coisa de criar efeitos, tenho que treinar mais, demoro muito para fazer um. Fiquei a tarde toda tentando fazer essa coisinha. Na verdade foi apenas 1 hora, mas surgiu um problema que quando passava o mouse na imagem as outras estavam subindo, daí fiquei a tarde toda só tentando resolver isso. Mas enfim, consegui e aqui está o efeito! Acho que fica legal usá-lo para autores ou algo do tipo ♥ Enfim, veja a preview e o tutorial!
Preview
Bom, o fundo branco de quando você passa o mouse onde está escrito algo aqui chamaremos de 1º fundo na explicação e o fundo preto/cinza onde está escrito algo mais aqui chamaremos de 2º fundo. Clique em leia mais e veja o tutorial.
Bom, o fundo branco de quando você passa o mouse onde está escrito algo aqui chamaremos de 1º fundo na explicação e o fundo preto/cinza onde está escrito algo mais aqui chamaremos de 2º fundo. Clique em leia mais e veja o tutorial.
Vá no seu HTML e procure por ]]></b:skin> e acima da tag cole:
.crossed{
position: relative;
display: inline-block;
align: center;
width: 110px; /*largura*/
height: 110px; /*altura*/
text-align: center;
overflow: hidden;
border: 3px solid #cbafa5; /*cor da borda, senão quiser, tire isso*/
}
.crossed img {
z-index:1px;
background: #fff;
width: 110px;/*largura*/
height: 110px;/*altura*/
align: center;
}
.crossed .description{
position: absolute;
z-index:2px;
width: 110px;/*largura*/
height: 110px;/*altura*/
margin-top:0px;
margin-left:0px;
background: #fff; /*cor do 1º fundo, a parte branca da preview onde está escrito algo aqui*/
color: #000; /* cor do texto do fundo branco*/
text-shadow: 1px 1px 1px #303857;
opacity: 0.0;
-webkit-transition: all 1.0s ease-out;
-moz-transition: all 1.0s ease-out;
}
.crossed:hover .description {
opacity: 0.75;
width: 110px;/*largura*/
height: 110px;/*altura*/
margin-top: -114px;
margin-left:0px;
}
.crossed .bla{
z-index:3px;
width: 110px;/*largura*/
height: 110px;/*altura*/
margin-top:-140px;
margin-left:0px;
background: #ABA4A1; /*cor do 2º fundo, a parte cinza da preview onde está escrito algo mais aqui*/
color: #000;/* cor do texto do fundo cinza*/
text-shadow: 1px 1px 1px #303857;
opacity: 1.0;
-webkit-transition: all 1.0s ease-out;
-moz-transition: all 1.0s ease-out;
}
.crossed:hover .bla {
position:relative;
transform: ease-out;
opacity: 1.0;
width: 110px;/*largura*/
height: 110px;/*altura*/
margin-top: 38px;
}
Bom, está tudo explicado entre /* e */ . Só tem um detalhe: Quando você for mudar o tamanho, tem que mudar TODOS os width e TODOS os heigth. E tirar esse mesmo valor dos dois margin-top que eu deixei em negrito. Por exemplo, você mudou os width e os heigth de 110 para 150, ou seja, acrescentou 40 px. Você terá de acrescentar 40px nos 2 margin-top negritados, ou seja, ficará margin-top: -154px e margin-top: 78px. Qualquer dúvida é só falar que eu lhe ajudo
Depois adicione um gadget de HTML/Javascript e cole:
Depois adicione um gadget de HTML/Javascript e cole:
<div class="crossed"><img src="http://1.bp.blogspot.com/-SHPxd2v6NBk/UMZZyZ3l7VI/AAAAAAAAEyg/j79aKkJgcqQ/s1600/zzzzzzzzzzzzz.png" /><div class="description"><br/>Algo aqui<div class="bla"> Algo mais aqui</div></div></div>O que eu deixei em negrito é o link da imagem, e os sublinhados é o que ficará escrito.
Espero que tenham gostado! Beijos
Não muda de lay agora não, esse tá lindjo demais :3
ResponderExcluirOMG! Sério que você que fez o efeito? Ficou muito divo *--*
Favoritei pra usar depois :p
Beijo
ill-helpyou.blogspot.com
Linda, amei seu blog, estou seguindo ♥ O layout ficou lindo demais, acho que não deveria trocar, não... E o efeito ficou super Show! Se eu for usar no quadrado menor vai ser o nome e em cima sobre a pessoa. ~Kisses
ResponderExcluirFicaria muito feliz com sua visita, ainda mais se seguisse o blog... www meninadealegria blogspot com (Põe ponto onde eu deixei espaço, ok?)
adorei o efeito muito fofo
ResponderExcluiraceita afiliação?
http://foryoulonelygirl.blogspot.com.br/
Vou tentar usa-lo :))
ResponderExcluirAmore, tem selinho pra vc no blog!
Beijoos!
Adorei!!
ResponderExcluirVou tentar usar no meu Blogger.
Ah! Coloca o layout de natal só quinta! :)
Beijos---->milena-modaeglitter.blogspot.com.br
Tôo esperando o lay de Natal ok?!
ResponderExcluirTomara que fique tão lindo quanto este!!
Jah estou participandoo --> http://a-penas-ana.blogspot.com.br/2012/11/campanha-de-natal-faca-uma-blogueiroa.html
Meu blog: rascunhosdecaneta.blogspot.com
Amei fofaa e já estou usando ;)
ResponderExcluirjust--dont.blogspot.com.br