如何在悬停时使图像在div中向上移动

Question

I have a question on how to go about making a div that when you hover it, an image on the inside will move up into the div.

This is my code so far:

<div id="div1">
  <div id="div2">
    <img src="http://dummyimage.com/300x300/000/fff" width="300px" height="300px">
  </div>
</div>

css

#div1 { 
    width: 300px;
    height: 300px;
    border: 2px black solid;
    position: absolute;
    top: 100px;
    left: 500px;
    overflow: hidden;
}

#div2 img {
    position: absolute;
    top:200px;
}

This image that sits in the div1 sits at the bottom of the div, the rest of the overflow is hidden. I want it to move up when the div is hovered.

Any idea on how to go about this? I was going to use the transform css and translateY it but I'm not sure if there is a better way that this can be done through JQuery.

Let me know what you think

Answer 1

Here is pure css approach with transition on hover

 #div1 { width: 300px; height: 300px; border: 2px black solid; position: relative; overflow: hidden; } #div2 img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.3s ease-in; } #div1:hover img { top: 30%; } 

 <div id="div1"> <div id="div2"> <img src="http://placehold.it/350x150"> </div> </div> 

Answer 2

#div1:hover #div2 img{
    top: 100px; //change this number to get correct placement
} 

Answer 3

Use :hover on your CSS and specify a new location for the image when you hover. You can even animate it so it "glides" into position.

Answer 4

You have the image unnecessarily wrapped in a div. just assign the id to the image itself

  <div id="div1">
        <img id="div2" src="http://www.maceire.com/wp-content/uploads/2015/01/grey- bac  kground-1-wide-hd-background-and-wallpaper.jpg" width="300px" height="300px">
  </div>

Then you can manipulate to top css value

var q = document.getElementById('div2');
q.style.top = '0px';

and

q.style.top = '200px';

to move up and down

Answer 5

For performance and simplicity, use CSS if possible and resort to javascript when you need to support legacy browsers. Your needs here could easily be solved using just CSS:

#div1 { width: 300px;
    height: 300px;
    border: 2px black solid;
    position: absolute;
    top: 100px;
    left: 500px;
    overflow: hidden;
}

#div2 img {
    position: absolute;
    top: 80%;
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/
}

#div1:hover #div2 img {
    top: 0%;
}

This approach does not require you to know the dimensions of the image.