morty346 morty346 - 1 month ago 9
CSS Question

How to move an image up in a div?

I have a semi complicated website, and tucked inside a bunch of is an image, I need that image to be moved up x number of pixels. I have the overflow hidden, so that it will cut the image off at the bottom (as expected) but I can't get the image to move where I want it to with the width maintaining 100%, and the image coming from the bottom

Here is a jsfiddle of the code

#DIV_8 {
cursor: pointer;
border-style: solid;
border-width: 1px;
height: 200px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
width: 300px;

overflow: hidden;
}

#DIV_9 {
max-height: 250px;
width: 100%;
height: auto;
display: inline-block;
vertical-align: bottom;
max-width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

Answer

Seems to work by adding:

#DIV_9 {
    position: relative;
    top: -20px;
}

Adjusting top moves the image up and down.

https://jsfiddle.net/y197yjp2/