Hoje trouxe mais um efeito. Vocês já devem estar se cansando de tantos efeitos, né? Mas esse é diferente!! Pois ele foi feito totalmente por mim. Estou muito feliz, pois finalmente estou conseguindo mexer bem em HTML e fazer meus próprios códigos! O efeito não é grande coisa, mas fiz com muito carinho para vocês. Fiquei ontem a tarde quase que toda aprendendo como se faz, e, a noite, finalmente consegui fazer ele.
Vá no seu HTML e procure por ]]></b:skin> Acima dessa tag coloque:
.efeito{align: center;width: 225px;/* largura da imagem*/height: 250px; /* altura da imagem*/overflow: hidden;}.efeito img{background: #fff;width: 225px; /* largura da imagem*/height: 250px; /* altura da imagem*/align: center;}.efeito:hover img{opacity: 0.5;-webkit-transition-duration: 1.30s;}.efeito .descrip {width: 100px; /* largura da imagem -25px */height: 125px;/* altura da imagem -25px */margin-top:-680px;margin-left:0px;background:rgba(255,255,255,0.5); /*cor e opacidade do fundo*/color: rgba(0,0,0,0.7);text-shadow: 0px 0px 4px #323232;-webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;border: 4px solid #FFf; /*cor da borda*/}.efeito:hover .descrip {-webkit-transform: rotateY(-720deg);width: 207px;/* largura do quadrado branco*/height: 234px; /*altura do quadrado branco*/margin-left: 5px;/*posição do quadrado branco*/margin-bottom:-5px;/*posição do quadrado branco*/margin-top:-251px; /*posição do quadrado branco*/}
Está tudo explicado entre /* e */ Depois, crie um gadget de HTML/javascript e cole: <div class="efeito"><img src="http://24.media.tumblr.com/tumblr_m2jvvg8h5g1r9uve2o2_250.png"><div class="descrip"><br/><br/>Escreva algo aqui. Escreva algo aquiEscreva algo aqui. Escreva algo aquiEscreva algo aqui. Escreva algo aqui. Escreva algo aqui</div></div> O que eu negritei é onde você deve alterar. O primeiro é o link da imagem, e o segundo é o texto que vai aparecer. Depois salve e pronto! |
Que efeito perfeito *-* Vou utilizar
ResponderExcluirCat Girl
OMG! Que lindo, acho que usar. Muito perfeito ^^
ResponderExcluirXoxo, Melissa :*
doucelamour-oficial.blogspot.com.br
Ótimo tutu. Tá tudo bem explicadinho :)
ResponderExcluirA Little More Than Gloss (clica no perfil)
bjs !!
Nossa, que lindo!
ResponderExcluirEu não consigo fazer nada assim ;c
Ficou show, mesmo, parabéns! ^^
Que PERFEITO! Ficou maravilhoso Barbs *---*
ResponderExcluirAdorei :D
Beijos
ill-helpyou.blogspot.com
PERFEITO o efeito! Simplesmente isso!!!
ResponderExcluirEncantos de Uma Adolescente
Muito legal esse efeito ! Ficou muito bom flor.
ResponderExcluirBezoos
Fanny Dream
Ammeiii, fica perfeito, sério!!
ResponderExcluirCliquesnocapricho.blogspot.com
Adorei o tutorial, eu só não uso pq tenho medo em mecher em Html, sempre não da certo ' kaskask', Seguindo aqui, se puder seg tbm ? (:
ResponderExcluirinspirando-ideias.blogspot.com.br
Eu vou usar! Achei lindo demais!
ResponderExcluirHistoriaAgridoce.blogspot | Acesse baby!
o efeito é muito bonito. Nada melhor do que sentir orgulho!
ResponderExcluirquerosabertudo-k.blogspot.com
gostei do efeito, bem diferente mesmo, parabéns! :))
ResponderExcluirbjossss
queridanostalgia.blogspot.com
Ficou perfeito flor, simples nada rçrç perfeito msm !
ResponderExcluir- Beijos.
http://oseumundomaisfashion.blogspot.com.br/
brigada me ajudou muito
ResponderExcluir