29 de dez. de 2013

Efeito Light Cub

Bom dia queridos leitores do meu querido blog, como esta o dia? espero que bem, bem hoje eu estava meio sem ideias para a postagem, ando meio sem criatividade, espero que seja temporário rsrs, mas acabei trazendo um efeito bem legal para vocês usarem em sua elite de afiliados ou aonde você quiser, o tutorial é rápido e simples... e vamos que vamos... beijos e até amanha!!


01- Passo - Cole o código abaixo acima da tag: ]]></b:skin>


.sd {
   width: 290px;
   height: 200px;
   margin: 10px;
   float: left;
   border: 5px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   box-shadow: 1px 1px 4px #ccc;
   cursor: default;
}
.sd .luv, .sd .content {
   width: 290px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.sd img {
   display: block;
   position: relative;
}


.efeito img {
   opacity:1;
   -webkit-transition: all 0.3s ease-in;
   margin-top: 0;
   -webkit-transition-duration: .50s;
}
.efeito .luv {
   cursor:pointer;
   opacity:0.5;
   visibility:visible;
   border:100px solid #e69ba7;
   box-sizing:border-box;
   -webkit-transition-duration: .50s;
}
.efeito:hover .luv {
   border:0px double #fff;
   opacity:0;
   visibility:hidden;
   -webkit-transition: all 0.4s cubic-bezier(0.940, 0.850, 0.100, 0.620);
   -webkit-transition-duration: .50s;
   }
.efeito:hover img {
   opacity:1;
  -webkit-transition-duration: .70s;
}

02- Passo - Coloque o código abaixo em um HTML/JAVASCRIPT onde você quer que apareça.

<div class="sd efeito"> 
    <a href="LINK"><img src="LINK DA IMAGEM" /></a>  
    <div class="luv"></div>  
</div> 


<div class="sd efeito"> 
   <a href="LINK"><img src="LINK DA IMAGEM" /></a>  
    <div class="luv"></div>  
</div>


    Feito isso salve e desfrute do lindo resultado, beijos meus zombies e espero que tenham gostado!!

23 comentários:

  1. Esse vai pro meu proximo lay sem duvidadas, ja tava a dias atraz de um efeito parecido cm ele mas todos os tutoriais davam erro --' . Bjus .
    www.ourblackpen.blogspot.com || Facebook || Ask || We ♥ It

    ResponderExcluir
  2. Legal o efeito, belo post.
    Seguindo aqui. ~Abraços!

    Visita | Segui? >> sevendays-official.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Oi Babi que bom que gostou do efeito, é muito lindo mesmo!

      Excluir
  3. Ele é bem "simples" mas achei lindo, com uma cor diferente fica ótimo! *----* Amei!

    Beijos, Estante de Sonhos

    ResponderExcluir
    Respostas
    1. verdade Mariana fica lindo mesmo, obrigada pela sua vista!

      Excluir
  4. Oiie, eu criei meu blog novo ontem a noite, e queria perguntar se aceita afiliação :)
    Adorei o tutorial, mas tem como mudar a cor? Eu queria lilas, pra combinar com o layout :/

    Seguindo aqui, se puder, faz uma visitinha?
    http://a-culpa-e-da-stylik.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oie linda primeiramente obrigada pela visita e fico feliz que tenha gostado do tutorial, é sim tem como a mudar a cor do efeito, basta você pesquisar no código.. é e claro que aceito afiliação será muito bom ter você na elite!!

      Excluir
  5. OMG! Que efeito perfeito. Seguindo aqui, segue de volta? Obg

    http://littlethingoficial.blogspot.com.br/

    ResponderExcluir
  6. Oi Leslie, obrigada por avisar que o Gadget de seguidores lá do MRT tava com problema, já arrumei e testei, acho que tá funcionando direitinho de novo hahah

    http://www.myrandomthings.tk
    http://www.facebook.com/MyRandomThingsBlog

    ResponderExcluir
    Respostas
    1. que bom Laura, agora vou sim seguir o seu blog,obrigada por avisar..

      Excluir
  7. ~Nyaah
    Que lindo o efeito Leslie!!
    Amei *---*

    ~. Kissus de morangos .~

    / / s2loves2animes.blogspot.com / /

    ResponderExcluir
  8. Adorei o tutorial *3*. Ei, tem umas tags para você lá no meu blog
    Mundo Kawaii

    ResponderExcluir
    Respostas
    1. obrigada, que bom que gostou!! com certeza depois irei responder a tag..

      Excluir
  9. Nossa super legal esse efeitoo, amo ele *u*

    Bjooos | seguindo | http://dar-king.blogspot.com.br/

    ResponderExcluir
  10. Oi, lindona!!! Adorei o efeito! Aliás, amo seus tutoriais e seu layout é perfeito! Beijooos!
    http://mygirlyandbooks.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada Mah, você que é lindona! agradecida por gostar dos tutos..

      Excluir
  11. Nossa, que efeito lindo *o* Gostei muito!
    E ameeeeeeeei esse layout ;3
    Hey, eu aceito a afiliação, já vou colocar você na elite, ok?
    Beijos <3

    Naikors | http://naikors.blogspot.com.br/

    ResponderExcluir
  12. Olá, amiga!! Passando para fazer a avaliação do seu blog, constatei que o banner da Agenda não está em seu blog e não consegui te encontrar entre os meus seguidores.Se você seguir o meu blog, por favor deixe o seu NOME DE SEGUIDORA correto, para eu poder achar.Aguardo a sua resposta, pois divulgarei os blogs no dia 06/01/2014.Bjsss!!!

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

    ResponderExcluir
    Respostas
    1. Obrigada Magda em breve cumprirei os requisitos, beijos..

      Excluir
  13. AMEI o efeito!!! Olha a Lana Del Rey ai na ilustração. Adoro ela.

    Um beijo!

    ResponderExcluir