<img src="https://picsum.photos/id/1069/250/250" class="left" alt="a jellyfish">
<img src="https://picsum.photos/id/1074/250/250" class="right" alt="a lioness">
<img src="https://picsum.photos/id/433/250/250" class="top" alt="a bear">
<img src="https://picsum.photos/id/582/250/250" class="bottom" alt="a wolf">

img {
  --s: 200px; /* the image size */
  
  width: var(--s);
  height: var(--s); /* better than aspect-ratio in case the image has a height attribute */
  box-sizing: border-box;
  object-fit: cover;
  cursor: pointer;
  transition: .5s;
}
img.left {
  object-position: right;
  padding-left: var(--s);
  background: #542437;
}
img.right {
  object-position: left;
  padding-right: var(--s);
  background: #8A9B0F;
}
img.top {
  object-position: bottom;
  padding-top: var(--s);
  background: #E94E77;
}
img.bottom {
  object-position: top;
  padding-bottom: var(--s);
  background: #7A6A53;
}

img:hover {
  padding: 0;
}


body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: auto auto;
  place-content: center;
  gap: 30px;
  background: #C6E5D9;
}