Bom dia gente!
Antes de mais nada queria dizer que priorizarei os tutoriais por aqui. É claro que teremos utilitários frequentemente, o que quero dizer é que postarei mais tutoriais. Pensei bastante e concluí uma coisa: Cada um pode e têm a capacidade de fazer os seus próprios materiais, já os tutoriais não são todos que conseguem e têm facilidade em criá-los por conta própria. Acho que eles são o que há de mais útil em um blog, assim irei enfatizá-los por aqui.
Então, hoje trouxe um efeito que fiz. Não sei se sou só eu, mas já estava sentindo saudade de fazê-los. O de hoje é bem simples. Não sei se vocês se lembram da Descrição Hover 1.0 que postei aqui uma vez, nomeada de Efeito Rotate. Hoje eu trouxe a Descrição Hover 2.0. Deixei com esse nome mesmo, já que não consegui achar nenhum melhor. Os avatares da demonstração são do Kawaii World, então créditos por eles.
Procure por b:skin e acima cole:
.descrição2 {
text-align: center; /*alinhamento do texto*/
width: 80px; /*largura*/
height:80px; /*altura*/
overflow: hidden;display: inline-block;
position: relative;
margin:2px; /*espaço entre as imagens*/
}
.descrição2 img{
-webkit-filter: none;
-webkit-transition:all 5s ease;
width: 80px; /*largura*/
height:80px; /*altura*/}
.descrição2 img:hover {
-webkit-filter:grayscale(1); /*efeito preto e branco da foto*/
-webkit-transition:all 0.5s ease;
-webkit-transition-duration: 2.0s;
}
.descrição2 .description{
position: absolute;
width: 80px; /*largura*/
height:80px; /*altura*/opacity: 0.0;
background: #000; /* cor do fundo da descrição*/
color: #fff; /*cor da letra*/
text-shadow: 1px 1px 1px #303857; /*sombra da letra*/
-webkit-transform: scale(0.0,0.0);margin-top: -80px; /*altura em negativo, valor do width em negativo*/
margin-left: 0px;
}
.descrição2:hover .description{
width: 80px; /*largura*/
height:80px; /*altura*/opacity: 0.7; /*opacidade do fundo da descrição*/
-webkit-transform: scale(1.0,1.0);
-webkit-transition-duration: 1.0s;
margin-top: -84px; /*altura mais 4, valor do width +4*/
margin-left: 0px;
}
Está tudo explicado entre /* e */. Vou apenas esclarecer uma coisa: Nos dois "margin-top" eu expliquei como valor do width em negativo e valor do width mais 4. Isso é só para que, se você for mudar o tamanho, saber o que colocar neles. Depois disso salve.
Adicione um gadget html/javascript e nele cole:
Adicione um gadget html/javascript e nele cole:
<div class="descrição2"><img src="Link da imagem" /><div class="description">Algo aqui</div></div>
<div class="descrição2"><img src="Link da imagem" /><div class="description"><br/>Algo aqui</div></div>
<div class="descrição2"><img src="Link da imagem" /><div class="description"><br/>Algo aqui</div></div>
Mude o que está em negrito. Pronto! O efeito é simples, mas espero que tenham gostado. Beijos ♥
ficou muito bom barbará,mas uma coisa,está de dia,se a postagem ofi programada o blogge rerrou feio,kkkkkkkkkkkk
ResponderExcluirvou usa-lá no proximo lay*em construção*
^^
Coração de Diamante
kkkk é verdade, eu escrevi ela ontem, e esqueci de tirar o "Boa noite". Já arrumei, obrigada!
ExcluirQue efeito lindo, e parabéns o layout está incrível (:
ResponderExcluir~~> Plush Clouds <~~
Acho muito melhor você começar à postar mais tutoriais do que utilitários, pois muita gente têm dificuldade em criá-los por conta própria, como você disse =^.^= Adorei o efeito, usarei ele no meu próximo layout *-* Beijão!
ResponderExcluirJu, do Epílogos e Finais.
Fica lindo essa descrição.Acho que vou usar no novo layout que estou fazendo :3 Sim, novo layout.Maluquisses minha.
ResponderExcluirBeijos >.< Good Lollipop
Muito fofo o efeito. Parabéns.
ResponderExcluirEu também acho que os tutoriais são melhores de se fazer. Mas também tem um detalhe: muita gente tem preguiça, não sabem ou não tem como fazer seus próprios materiais.
Beijos,
Pâm
http://meniina-delicada.blogspot.com.br/
Adorei o efeito, ficou super cute, e o melhor de tudo é que não há tanto problema na instalação, é tudo bem fácil!
ResponderExcluirAmei o tuto ><
BANGTEEN.BLOGSPOT.COM
Que efeito lindo, bem diferente. Adorei ^^
ResponderExcluirKissus ~
- Wonderland Cherry -- > Novo Post
Vou salvar aqui, e colocar no próximo lay haha ^^ Segui aqui (: Beijos ♥
ResponderExcluirFadas Existem (Clique aqui ou no perfil)
Blog da Júlia (Clique aqui ou no perfil)
Ficou muito lindo o efeito, amo coisas inéditas assim! Amei muito o seu! E é super fácil o tutorial e bem explicadinho!!
ResponderExcluirBeijos!
Garota Vertigem
Simplesmente amo os efeitos que você faz *--* Esse também ficou perfeito! ><
ResponderExcluirFavoritei, acho que vou usar depois! :D
Beijo
ill-helpyou.blogspot.com