<div class="slide-wrap">
  <ul class="slide-image">
    <li id="item-01" class="slide-image__item js-target current">
      <img src="https://source.unsplash.com/rkaahInFlBg/640x360" alt="">
    </li>
    <li id="item-02" class="slide-image__item js-target">
      <img src="https://source.unsplash.com/3esjG-nlgyk/640x360" alt="">
    </li>
    <li id="item-03" class="slide-image__item js-target">
      <img src="https://source.unsplash.com/9HnSQn4TVEg/640x360" alt="">
    </li>
  </ul>
  <div class="slide-text">
    <p data-target="item-01" class="slide-text__text js-trigger">
      <span>Iron Man</span>
    </p>
    <p data-target="item-02" class="slide-text__text js-trigger">
      <span>Thor</span>
    </p>
    <p data-target="item-03" class="slide-text__text js-trigger">
      <span>Captain America</span>
    </p>
  </div>
</div>

.slide-wrap {
  @media screen and ( min-width: 600px ) {
    display: flex;
  }
}

.slide-image {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  padding: 0;
  margin: 0;
  overflow: hidden;

  @media screen and ( min-width: 600px ) {
    width: 65%;
  }
  
  &__item {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition:
      opacity .45s cubic-bezier(0.65, 0, 0.35, 1),
      visibility .45s cubic-bezier(0.65, 0, 0.35, 1),
      transform .45s cubic-bezier(0.65, 0, 0.35, 1);

    @media screen and ( min-width: 600px ) {
      transform: translateX(-20px);
    }
    
    &.current {
      opacity: 1;
      visibility: visible;
      transition:
        opacity .45s cubic-bezier(0.65, 0, 0.35, 1),
        visibility .45s cubic-bezier(0.65, 0, 0.35, 1),
        transform .45s cubic-bezier(0.65, 0, 0.35, 1);
      transform: translateY(0);

      @media screen and ( min-width: 600px ) {
        transform: translateX(0);
      }
    }
  }
  
  img {
    width: 100%;
    height: auto;
  }
}

.slide-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;

  @media screen and ( min-width: 600px ) {
    width: 35%;
  }
  
  &__text {
    display: inline-flex;
    align-items: center;
    margin: 8px 0;
    font-size: 24px;
    font-weight: 500;
    transition: padding-left .25s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
    
    &:before {
      content: '';
      display: block;
      width: 8px;
      height: 2px;
      margin-right: 8px;
      transition: background-color .2s cubic-bezier(0.65, 0, 0.35, 1);
    }
    
    span {
      padding-bottom: 4px;
      border-bottom: 1px dotted #fff;
      transition: border-bottom-color .2s cubic-bezier(0.65, 0, 0.35, 1);
      will-change: transform;
    }
    
    &:hover {
      padding-left: 12px;
      cursor: pointer;
      
      span {
        border-bottom-color: #000;
      }
      
      &:before {
        background-color: #000;
      }
    }
  }
}

const triggers = document.querySelectorAll('.js-trigger'); 
const images = document.querySelectorAll('.js-target');

triggers.forEach(trigger => {
  trigger.addEventListener('mouseover', (e) => {
    const item = e.currentTarget;
    const target = item.getAttribute('data-target');
    const current = document.getElementById(target);
    images.forEach(image => {
      image.classList.remove('current');
    });
    current.classList.add('current')
  });
});