How to move an image up in a div so that the top is cropped, not the bottom?

Question

I have a div containing an image that has been expanded to fit the entire page in width and most of the page in height.

.mainarea {
  width: 100%;
  height: 80vh;
  overflow: hidden;
}

.sliderarea {
  border: 0px solid red;
  width: 605%;
  height: 80vh;
}

.slideimg {
  width: 16.5%;
  height: auto;
}

.imagetext {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 30%;
  left: 50%;
  color: white;
}

<div class="mainarea">
  <div class="layer"></div>

  <div class="imagetext">
    <h1>Slogan</h1>
    <button>Place An Order</button>
  </div>


  <div class="sliderarea">

    <img class="slideimg" id="pizza" src="https://th.bing.com/th/id/R.64e63c78f7cf2b463e5b89e72162cfc2?rik=JartPjLCg6Q8%2bw&pid=ImgRaw&r=0">
  </div>
</div>

This is a series of images that are going to be sliding in from the side. Right now though I am primarily focused on the first image. The problem is that by expanding the image, it scaled automatically so that the bottom of the image is now cropped. Is there a way for me to push it upwards so that the top is cropped/hidden, and I can see the bottom. (I tried to use object-position: 0 -50%; but that did not work.)

Answer 1

.mainarea {
  position: relative;
  width: 100%;
  height: 80vh;
  overflow: hidden;
}
.sliderarea {
    border: 0px solid red;
    width: 605%;
    height: 80vh;
}

.slideimg {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
}
.imagetext {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 30%;
    left: 50%;
    color: white;
}

<div class="mainarea">
<div class="layer"></div>

<div class="sliderarea">

  <img class="slideimg" id="pizza" src="https://th.bing.com/th/id/R.64e63c78f7cf2b463e5b89e72162cfc2?rik=JartPjLCg6Q8%2bw&pid=ImgRaw&r=0">
</div>

<div class="imagetext">
  <h1>Slogan</h1>
  <button>Place An Order</button>
</div>
</div>
</div>

Answer 2

You could try object-position: 0 -200px;.

Here you are offsetting the Y position by negative 200 pixels.

For this solution you will need to adjust the offset for different resolutions by using media queries.

EDIT: Another solution would be to swap out the image tags for background images and adjusting the background-position value, like so:

.slideimg {
  background-image: url('https://th.bing.com/th/id/R.64e63c78f7cf2b463e5b89e72162cfc2?rik=JartPjLCg6Q8%2bw&pid=ImgRaw&r=0');
  height: 80vh;
  background-position: center center;
  /* possible values (x,y): center left right bottom top*/
}

.imagetext {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 30%;
  left: 50%;
  color: white;
}

<div class="mainarea">
  <div class="layer"></div>

  <div class="sliderarea">
    <div class="sliderarea">
      <div class="slideimg" id="pizza"></div>
    </div>

    <div class="imagetext">
      <h1>Slogan</h1>
      <button>Place An Order</button>
    </div>
  </div>
</div>