Tutorial - Descrição Surpresa

 

Boa noite, meus lindos.

Hoje dá para ser o dia de maratona de tutoriais do blog, trouxe um monte. Pelo menos agora vocês não podem reclamar que a tag tá desatualizada, ando me empolgando bastante em relação aos tutoriais, principalmente porque não quero ver blogs tão iguais como anda acontecendo. Talvez até amanhã eu traga um template free para vocês, vamos ver se a preguiça deixa.

O tutorial da vez eu vi em um blog e decidi pesquisar no tumblr, coincidentemente achei no mesmo tumblr do tutorial do efeito queen, o DFY. O efeito é muito simples: Ao passar o mouse sobre a imagem, a descrição aparece em um efeito muito lindo e fofo. Recomendo também que seja usado em templates mais modernos e sofisticados, combina mais.

1. Vá até editar HTML e procure por ]]></b:skin>. Acima da tag, cole o seguinte:

.imagepluscontainer{ /* main image container */

position: relative;

z-index: 1;

}

.imagepluscontainer img{ /* CSS for image within container */

position: relative;

z-index: 2;

-moz-transition: all 0.5s ease; /* Enable CSS3 transition on all props */

-webkit-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.imagepluscontainer:hover img{ /* CSS for image when mouse hovers over main container */

-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);

-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);

box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);

-moz-transform: scale(1.05, 1.05);

-webkit-transform: scale(1.05, 1.05);

-ms-transform: scale(1.05, 1.05);

-o-transform: scale(1.05, 1.05);

transform: scale(1.05, 1.05);

}

.imagepluscontainer div.desc{ /* CSS for desc div of each image. */

position: absolute;

width: 90%;

z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */

bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */

left: 5px;

padding: 8px;

background: rgba(0, 0, 0, 0.8); /* black bg with 80% opacity */

color: white;

-moz-border-radius: 0 0 8px 8px; /* CSS3 rounded borders */

-webkit-border-radius: 0 0 8px 8px;

border-radius: 0 0 8px 8px;

opacity: 0; /* Set initial opacity to 0 */

-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 shadows */

-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);

box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);

-moz-transition: all 0.5s ease 0.5s; /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */

-webkit-transition: all 0.5s ease 0.5s;

-o-transition: all 0.5s ease 0.5s;

-ms-transition: all 0.5s ease 0.5s;

transition: all 0.5s ease 0.5s;

}

.imagepluscontainer div.desc a{

color: white;

}

.imagepluscontainer:hover div.desc{ /* CSS for desc div when mouse hovers over main container */

-moz-transform: translate(0, 100%);

-webkit-transform: translate(0, 100%);

-ms-transform: translate(0, 100%);

-o-transform: translate(0, 100%);

transform: translate(0, 100%);

opacity:1; /* Reveal desc DIV fully */

}

2. Em um gadget de HTML/JavaScript, cole:

<div class="imagepluscontainer" style="width:LARGURADAFOTOpx; height:ALTURA DA FOTOpx; z-index:2">

<img src="URLDAFOTO" />

<div class="desc">

ESCREVA ALGO AQUI, É ISSO AQUI QUE VAI APARECER QUANDO VOCÊ PASSAR O MOUSE NA IMAGEM.

</div>

</div>

Troque o que está em negrito e escreva também sua descrição, depois é só salvar. Lembre-se que você precisar deixar espaço para a descrição hover, pois se não deixar ela não vai aparecer e vai ser coberta.