D.A PEDIDO : Tutorial - Efeito deslizar na imagem dos posts

Bom gente, hoje é a pedido que estou fazendo esse tutorial, bom o efeito deslizar na imagem pode ser visto aqui:  http://blogdetestesdelicadaeabusada.blogspot.com.br/  é só passar o mouse por cima.

✿ dazed ✿ | via Tumblr
Bom vamos ao tutorial? sim!!

1 - Vá no seu HTML
2 - agora procure por:

/* Variable definitions
3- agora acima dele cole o código abaixo:

/* Post com imagem deslisante - Delicada e Abusada -
----------------------------------------------- */
.post {
width:600px; /* largura do post */
height:500px; /* altura do post */
background: #ffffff; /* background dos posts */
    margin-top: -28px; /* margem acima - só altere se tiver conhecimentos em html */
overflow:hidden;
float: center;
}
.post h3 { /* Titulos */
font-size: 12px; /* Fonte do título do post */
background: #000000; /* fundo dos titulos */
font-weight:bold;
padding:10px 0;
height: 20px; /* altura do fundo dos titulos */
}
.post-body {
height: 500px; /* altura do post */
overflow:hidden;
}
.post-body img {
max-width: 600px; /*largura do post (sim do post!) */
margin-left: -70px;-moz-transition: all 0.2s ease-in-out; /* o efeito vai da esquerda para direita, se quiser ao contrário, troque left por right */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;}
.post-body img:hover{
margin-left: 0px;}

4 - visualize e veja se está tudo ok, e salve! 

Atenção: O tutorial é grande para uma imagem não é? eu sei, é por que se colocar só o código da imagem, ela fica desalinhada, então isso é para ela não ficar desalinhada. ;)
ah, e outra coisa, quando clica volta as postagem personalizada como era antes, então no caso você deveria personalizar o /* Post

Bom gente, por hoje é só!
beijos,


e não se esqueça de participar dos nossos sorteios...

6 comentários

  1. Oba, mais uma dica preciosa. A gente agradece! ;-)
    Ótimo domingo.Bjim.

    ResponderExcluir
  2. Adorei a dica, sou péssima nessas coisas, mas vc ensinando parece bem fácil, vou tentar, obg por visitar mue blog lá e vlt sempre (= bjs

    http://asgarotasdonl.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. fácil é, mais tem que ter paciencia na hora de não pegar..

      Excluir
  3. Legal o tuto! ;)
    Kissus

    criandodesigne.blogspot.com

    ResponderExcluir
  4. Bem maneiro *---*


    <3 Cereja Black = http://cereja-black.blogspot.com

    ResponderExcluir










2011/2017 - Delicada e Abusada | Personalizado por Débora Alvim | Não copie! Encomende o seu na HTML LOVE DESIGN