04/01/2013

Efeito Descrição Surpresa

Pessoal o que vocês acham do novo nome do blog ser 'Sweet Explosion' ?
Hoy meus amores, como vão? eu estou bem (: 
Bom, hoje estou cheia de coisas para fazer, então só trouxe um tutorial de um efeito que eu acho muito criativo e bonito. Primeiramente os créditos vão ao maravilhoso Kawaii World.
O nome do efeito é ' Descrição Surpresa' para ver uma preview clique aqui
Vá no seu HTML e clique em expandir modelos de widgets de cntrl+f ou F3 e procure por ]]></b:skin> acima cole o seguinte código. (É um código bem grandinho, mas vale apena fica bem bonito no blog)
.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 */
}

Vá em layout, adicionar um gadget HTML/JavaScript e 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>
Pronto, visualize se estiver tudo certo salve. Espero que tenham gostado meus pequeninos.
Beijos



20 comentários:

  1. Muito lindo o efeito,adoro seu blog e suas postagens <33
    Beijos

    Candy Dream

    ResponderExcluir
  2. esse tuto é muito util, sem falar que fica lindo a descrição surpresa
    acervo-de-livros.blogspot.com

    ResponderExcluir
  3. Esse efeito é bem legal! <3

    Kissus
    gotas-de-fofura.blogspot.com

    ResponderExcluir
  4. O efeito é muito lindo, adoro!

    lady---bug.blogspot.com

    ResponderExcluir
  5. Esse efeito é lindo eu adoro !:)
    Bjs
    Diário Capricho

    ResponderExcluir
  6. Lindo o Efeito Adorei!
    Seguindo
    Beijos
    Goten Akai (Link no Perfil)

    ResponderExcluir
  7. Adoro esse efeito acho muito Lindo.

    http://meucupcakedemorango.blogspot.com.br/

    ResponderExcluir
  8. 1º AMEI O BLOG É LINDO DEMAIS~TO SEGUINDO
    2º Adoro esse efeito *--*
    Bjinhos
    http://chuvadesonhooficial.blogspot.com.br/

    ResponderExcluir
  9. É muito lindo esse efeito! Eu vou colocar com certeza no meu próximo lay!
    Flor, A-M-E-I seu blog! é muito fofo e delicado..
    Seguindo
    Estilo você - perfil

    p.s. Obrigada por visitar meu blog e comentar!
    bjos

    ResponderExcluir
  10. Achei fofo o tuto,mais se me permite. Eu não acho legal você usar o nome '' Sweet'' porque de 1000 blog que já visitei 800 tem Sweet, você poderia colocar outro no lugar. Bom, não se ofenda com minha opinião.
    Beijos <3

    http://www.meujeitoimperfeito.blogspot.com.br/

    ResponderExcluir
  11. Lindo o efeito,
    que layout mais divo o seu
    www.colecionandoborboletas.blogspot.com

    ResponderExcluir
  12. O efeito é lindo demais Debby!E eu...primeira a saber do nome,adorei!
    The fluffy land

    ResponderExcluir
  13. Acho super fofo esse tutô, o efeito é lindo!! E sobre o nome, eu achei lindinho Sweet Explosion, mas eu prefiro young world!! Beeijos!!
    pqngarota.tk

    ResponderExcluir
  14. Adoro esse tutorial, economiza espaço e é lindo! E eu prefiro que esse nome continue porque é mais criativo que Sweet Explosion
    beijinhos
    blog-cereja.blogspot.com

    ResponderExcluir
  15. Muito lindo esse efeito, tinha visto já e me apaixonei! Ah, e sobre o novo nome do seu blog, como acabei de conhecer, digo que preste muito bem atenção pra depois não se arrepender, acabei de mudar o nome do meu e estou satisfeita, pense bastante flor! Um beijo e estou seguindo o blog!

    blogueiradepantufas.blogspot.com.br

    ResponderExcluir
  16. Super fofo esse tutorial, todo tutorial do Kawaii World realmente arrasa! O nome ia ficar lindo Sweet Explosion e a url também! ;) Seguindo aqui já, se puder participa desse concurso http://pimentacupcake.blogspot.com.br/2012/12/concurso-meu-blog-e-top.html ? Please. Beijos flor

    ResponderExcluir
  17. Oi linda tudo bem? Achei otima a ideia, eu tbm to pensando em mudar o nome do meu blog, mas a dificil inspiração, se vc souber de algum me fala? Queria perguntar se você poderia dar uma passadinha no meu blog para me ajudar a me animar novamente, não tá fácil mas essa blogosfera né? As vezes fico desanimada e por esses últimos dias to assim, não sei como eu faço para se animar novamente.. Ps ja sigo seu blog, e além de tudo eu amo muito seu blog. É serio mesmo tá?
    Obrigada , e beijoos.

    cupcakeofchocolate.blogspot

    ResponderExcluir
  18. Oi fofa. Desculpa viu, eu estava em uma correria aqui que acabei nem percebendo.. Já to seguindo agora!
    Beijos
    PimentaCupcake

    ResponderExcluir
  19. Não vou mudar de novo Debby,o TFL é um blog novo lembra?O nome é supresa (dica:é em português)..eu expliquei no post o por quê!
    The fluffy land

    ResponderExcluir