Анимация при наведении

При наведении на кнопочку в виде плюса появляется картинка.

by akogch

HTML

<div class="block">
  <div class="plus">+</div>
  <div class="img hidden">
    <img
      src="https://diamondelectric.ru/images/2051/2050896/small_bulls_recreation_ground_2015_4.jpg"
      alt=""
    />
  </div>
</div>

<div class="block">
  <div class="plus">+</div>
  <div class="img hidden">
    <img
      src="https://im0-tub-ru.yandex.net/i?id=13b6dbe83a52187388e06744777689ca&n=33&w=251&h=150"
      alt=""
    />
  </div>
</div>

SCSS

.block {
  margin: 20px;
  position: relative;
  .plus {
    cursor: pointer;
    width: 20px;
    height: 20px;
    background: black;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 21px;
  }
  .img {
    border: 1px solid gray;
    display: block;
    position: absolute;
    top: 0;
    left: 50px;
    animation: scale 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    &.hidden {
      display: none;
    }
  }
}

@keyframes scale {
  0% {
    transform: scale(0);
    transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    transform: scale(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
}

JavaScript

var pluses = document.querySelectorAll('.plus');

for (var i = 0; i < pluses.length; i++) {
  pluses[i].addEventListener('mouseover', function (e) {
    e.target.parentNode.querySelector('.img').classList.remove('hidden');
  });
  pluses[i].addEventListener('mouseout', function (e) {
    e.target.parentNode.querySelector('.img').classList.add('hidden');
  });
}