<div class="vacancion__left">
  <ul class="vacancion__list">
    <li data-img="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT5XnMTrmQRz5MX-jfUsvdkPyTltF-h-ZJaZ25onztpmhXOlYog" class="vacancion__item">
      <p class="vacancion__item-title">Грузчик</p>
      <p class="vacancion__item-price">30 000</p>
      <span class="vanacion__item-number">01</span>
    </li>
    <li data-img="http://www.factroom.ru/facts/wp-content/uploads/2013/02/puppy.jpg" class="vacancion__item">
      <p class="vacancion__item-title">Бухгалтер</p>
      <p class="vacancion__item-price">30 000</p>
      <span class="vanacion__item-number">02</span>
    </li>
  </ul>
</div>
<div class="vacancion__right">
  <img src="https://picsum.photos/600/300" alt="" class="vacancion__img  vacancion__img--current">
</div>

.vacancion__left {
  width: 60%;
}

.vacancion__list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.vacancion__item-title {
  font-size: 22px;
  color: #4B4B4B;
}

.vacancion__item-price {
  font-weight: normal;
  font-size: 25px;
  color: #4B4B4B;
}

.vacancion__item {
  width: 30%;
  background: #68C3F5;
  box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08);
  padding: 30px;
  position: relative;
  border-radius: 7px 7px 0px 0px;
  z-index: 3;
  margin-bottom: 25px;
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.vanacion__item-number {
  position: absolute;
  bottom: -90px;
  right: 0;
  font-weight: bold;
  font-size: 80.9008px;
  line-height: 99px;
  color: #6AC6F6;
  transition: opacity 0.3s ease-in-out, bottom 0.5s ease-in-out;
}

.vacancion__item:hover .vanacion__item-number {
  opacity: 0.4;
  bottom: -40px;
}

.vacancion__item:hover {
  box-shadow: none;
}

.vacancion__item:before {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  top: -10px;
  background-color: #fff;
  border-radius: 50px;
  left: 50%;
  transform: translate(-50%, 0%);
}

.vacancion__item::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 90%;
  bottom: 0;
  left: 0;
  background-color: #fff;
  z-index: -1;
}

.vacancion__right {
  background-color: #68C3F5;
  width: 37%;
  min-block-size: 200px; /* Добавил */
  display: block;
  overflow: hidden;
  position: relative;
}

.vacancion__img {
  position: absolute;
  inset: 0;
  
  width: 100%;
  height: 100%;

  opacity: 1;
}

.vacancion__img--hidden {
  transition: 1s;
  opacity: 0;
}

"use strict";

let vacationRight = document.querySelector(".vacancion__right");
let currentVacationImage;
findCurrentVacationImage();

var liElems = document.querySelectorAll(".vacancion__item");
// let output = document.querySelector('.vacancion__img');
// output.src = "img/vacancion/vacancion1.png";

for (var i = 0; i < liElems.length; i++) {
  liElems[i].addEventListener("mouseenter", function(e) {
    // output.src = this.dataset.img;
    // output.classList.add("vacancion__img--hidden")
    appendNewVacationImage(vacationRight, e.target.dataset.img);
    hideAndRemove(currentVacationImage);
    findCurrentVacationImage();
  });
}



function findCurrentVacationImage() {
  currentVacationImage = document.querySelector(".vacancion__img--current");
}


function hideAndRemove(current) {
  current.classList.remove("vacancion__img--current");
  current.classList.add("vacancion__img--hidden");

  setTimeout(() => {
    current.remove();
  }, 1000) 
}


function appendNewVacationImage(targetElem, src) {
  let img = document.createElement("img");
  img.src = src;
  img.classList.add("vacancion__img");
  img.classList.add("vacancion__img--current");

  targetElem.prepend(img);
}