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="" 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

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

• javascript
• css
• html

5 Answers 5

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>

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

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.

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

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.