center Children bigger that parent

by Hugo Vale Pereira

HTML

<main>
  <h1 translate="no" >Cookies</h1>
  <div>
    <img src="https://picsum.photos/200/300" alt="" /> 
  </div>
  <div>
    <img src="" alt="" />
  </div>
  <div>
    <img src="" alt="" />
  </div>
</main>

CSS

main {
  margin-inline: 200px; /* Huhsdfg */
  /*background: green;*/
}

div {
  aspect-ratio: 3 / 4;

  /*background: red;*/

  display: grid;
  position: relative;
  margin-block: 50px;
  width: auto;
}

img {
  position: absolute;
  background: blue;

  --extra: 40px;
  width: calc(100% + var(--extra));
  height: calc(100% + var(--extra));

  /*grid-column: 1/2;
  grid-row: 1/2;*/

  place-self: center;
  pointer-events: none;
  border-radius: 50px;
  box-shadow: 0px 0px 50px 50px black inset;
}