Recadrez et déplacez les images. disposition de la grille

Question

Je travaille à placer l'image dans la bonne position et à la recadrer en haut et en bas. Voici à quoi cela devrait ressembler (partie héros) : https://www.behance.net/gallery/161732057/CozyMornings-online-store

L'ensemble du projet est construit sur la grille.

J'ai besoin d'une image circulaire déplacée vers la gauche, plus grande que le conteneur et recadrée en haut et en bas. De plus, il doit être réactif.

J'essaie de mettre une image dans un package. Donnez à ce wrapper une position relative et masquez le débordement. Cela ne fonctionne pas.

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

Merci pour votre aide !

Answer 1

Hide overflow doit être utilisé sur le conteneur principal, section héros.

.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;
}