javascript - How to go about making an image move up in the div on hover - Stack Overflow

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

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

Share Improve this question edited Jun 3, 2016 at 15:14 Endless 38.2k13 gold badges116 silver badges137 bronze badges asked Jun 3, 2016 at 15:06 Learn12Learn12 2161 gold badge3 silver badges14 bronze badges 0
Add a ment  | 

5 Answers 5

Reset to default 4

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.

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1744875476a4598520.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信