0

Gostaria de desenvolver alguma coisa em jQuery que fizesse com que as imagens dessa página cada uma dentro do seu "quadrado" deslizassem de cima para baixo quando o mouse fosse colocado em cima da imagem e voltasse para o topo assim que o mouse fosse tirado de cima.

Eu não entendo muito de jQuery mas uma coisa que eu fiz foi colocar estas classes de css como position: relative e position: absolute permitindo assim que o elemento mudasse de posição em relação ao seu parent.

Código HTML

    <div class="row showtheme">
       <div class="col-md-4 col-sm-4 col-xs-12">
           <div><img src="../wp-content/uploads/2015/05/theme_version_01.png" alt="" /></div>
       </div> 
    </div> 

CSS

    .showtheme div div {
        position: relative;
        overflow: hidden !important;
        border: 5px solid #ccc;
        border-radius: 3px;         
    }
    .showtheme div div img {
        position: absolute;
        max-width: 100%;
        heigtht: auto;
    }

1 Resposta 1

1

Funciona assim com css, agora só adaptar para seu código:

<style>
div {
  transition: all 0.5s ease;
  width: 200px;
  height: 200px;
  margin-top: 0px;
  background: red;
}
div:hover {
  margin-top: 100px;
}

</style>

<div></div>

Se precisar de algo mais complexo, acesse essa página: http://ianlunn.github.io/Hover/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .