Descrição hover 2.0

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.

Preview

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:

<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 ♥