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.
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!
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...
