Crop and move images. grid layout

Question

I'm struggling with getting the image in the right position and cropping it at the top and bottom. This is what it should look like (hero part): https://www.behance.net/gallery/161732057/CozyMornings-online-store

The entire project is built on the grid.

I need a circular image moved to the left, larger than the container and cropped at the top and bottom. Additionally, it should be responsive.

I'm trying to put an image into a wrapper. Give this wrapper a relative position and hide the overflow. This doesn't work.

.hero-image-wrapper {
  border: 0.3rem solid #968273;
  border-radius: 50%;
  overflow: hidden;
  width: 100%;
  height: 150%;
  position: relative;
  overflow: hidden;
  top: -25%;
  left: -10%;
}

.hero-image {
  transform: scaleX(-1);
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

<div class="hero-image-wrapper">
  <img class="hero-image" src="../images/pexels-ekaterina-bolovtsova-6976906-mobile.jpg">
</div>

thanks for your help!

Answer 1

Hidden overflow should be used on the main container, hero section.

.hero-section {
    grid-column: 1/13;
    grid-row: 2/3;
    display: flex;
    padding: 0% 10% 0% 0%;
    justify-content: space-between;
    gap: 0.5rem;
    overflow: hidden;
}