Align the image to the center of the block

by promonj

HTML

<div class="images">
  <picture class="images__item">
    <img src="https://i.ytimg.com/vi/nTT8I4i8q-0/hqdefault.jpg" alt="Изображение" class="images__item_img" title="Изображение">
  </picture>
</div>

CSS

.images {
  position: relative;
  max-width: 50%;
}

.images__item {
  display: block;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.images__item_img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: .3s;
}

.images__item_img:hover {
  transform: scale(1.2);
}