hover

Created by ippei (#19)

<body>
  <ul id="section">
    <li class="item">
      <a href="" class="a">
          <p>category</p>
          <div class="text">
            <h2>test-ttl-01test-ttl-01test-ttl-01</h2>
            <p>2022.04.18</p>
          </div>
      </a>
    </li>
    <li class="item">
      <a href="" class="a">
        <p>category</p>
        <div class="text">
          <h2>test-ttl-01test-ttl-01test-ttl-02</h2>
          <p>2022.04.18</p>
        </div>
      </a>
    </li>
    <li class="item">
      <a href="" class="a">
        <p>category</p>
        <div class="text">
          <h2>test-ttl-01test-ttl-01test-ttl-03</h2>
          <p>2022.04.18</p>
        </div>
      </a>
    </li>
    <li class="item">
      <a href="" class="a">
        <p>category</p>
        <div class="text">
          <h2>test-ttl-01test-ttl-01test-ttl-04</h2>
          <p>2022.04.18</p>
        </div>
      </a>
    </li>
    <div class="hover-stalker-img"></div>
  </ul>
</body>

/*font-family*/
$family-poppins:'Poppins', sans-serif;
$family-zen-kaku: 'Zen Kaku Gothic Antique', sans-serif;

/*color*/
$gray: rgb(41, 41, 41);
$white: #fff;
$white02:rgba(255, 255, 255, 0.228);
$font-color-ctg: rgb(162, 162, 162);

body {
  font-family: $family-poppins;
  font-family: $family-zen-kaku;
  background-color: $gray;
}

a {
  color: #fff;
  text-decoration: none;
}

li {
  list-style: none;
}

ul {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-flow: column;
  align-items: center;
  overflow: hidden;
  position: relative;
  li {
    width: 80%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    a {
      display: flex;
      align-items: center;
      padding: 48px 0;
      position: relative;
      &::before {
        content: "";
        height: 1px;
        width: 100%;
        background-color: $white02;
        display: block;
        position: absolute;
        top: 0;
      }
      &::after {
        content: "";
        height: 2px;
        width: 100%;
        background-color: $white;
        display: block;
        position: absolute;
        top: 0;
        transform: scale(0);
        transform-origin: right center;
        transition: transform 1s cubic-bezier(.19,1,.22,1);
      }
      > p {
        font-size: 16px;
        color: $font-color-ctg;
        margin-right: 5%;
      }
      div {
        h2 {
          font-size: 24px;
          letter-spacing: 0.07em;
        }
        p {
          font-size: 14px;
          color: $font-color-ctg;
        }
      }
      &:hover {
        &::after {
          transform: scale(1);
          transform-origin: left center;
        }
      }
      .hover-img {
        width: 350px;
        height: 350px;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 0;
        opacity: 0;
        img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
          transform: scale(1.1);
        }
      }
      &.js-active {
        z-index: 2;
        p {
          z-index: 2;
        }
        .text {
          z-index: 2;
          h2 {
            opacity: 1;
            transition: opacity 2s cubic-bezier(.19,1,.22,1);
          }
        }
      }
    }
  }
  .hover-stalker-img {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 350px;
    height: 350px;
    background-position: 0 0;
    background-size: cover;
    transform: translate(-50%, -50%);
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

const wrapper = document.getElementById('section');
wrapper.addEventListener('mouseenter', (e) => {
  gsap.to(image,{
    opacity: .5,
    visibility: "visible",
  })
})

wrapper.addEventListener('mouseleave', (e) => {
  gsap.to(image, {
    autoAlpha: 0,
  })
})

const image = document.querySelector('.hover-stalker-img');

wrapper.addEventListener('mousemove', (e) => {
  gsap.to(image, {
    duration: 2,
    x: e.pageX + 300,
    y: e.pageY - 100,
    ease: "Power4.easeOut",
  })
})