Semana de Goodies: Descrição Surpresa

Yah!

Olá tudo bom com vocês? Eu estou super animada hoje, as ideias para fazer a WebNovela surgiram cada vez mais já escrevi alguns capítulos e logo, logo posto para vocês. Hoje trouxe um tutorial ótimo é a Descrição Surpresa que é o que está na sidebar, esta descrição surpresa é muito boa e facilita bastante. Este tutorial é do Kawaii World então todos os créditos são todos de lá. Vamos ao tuto?

Vá até o seu HTML e procure por ]]> < /b:skin >. Acima da tag, cole o seguinte código:

.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 */

}

Salve, e depois adicione um gadget HTML/JavaScript cole:

< div class=" imagepluscontainer " style=" width: LARGURADAFOTO px; height: ALTURA DA FOTO px; 

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 onde estiver em negrito, e não se esqueça de colocar a descrição ok. Gostaram do tuto, espero que sim amanhã vou trazer alguns utilitários como PNG's e tals. Beijos galera, boa noite a todos!!!

{Larissa C.R.}