CSS Clip-Path Hover Effect

 
<div class="demo_wrapper">
  <div class="demo">
    <div class="image-wrapper">
      <img src="800x600_002.jpg"/>
    </div>
    <h2 class="title" data-cta="Подробнее ?">
      Заголовок
    </h2>
  </div>
</div>

 
<style>

  .demo_wrapper {
    width: 600px;
    height: 600px;
    margin: 0 auto;
    color: white;
    background-color: black;
    padding: 50px;

    --size: 60vmin;
    --space: 8vmin;
    --duration: 300ms;
    --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
    --bounce-out: cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  * {
    box-sizing: border-box;
  }



  .demo {
    position: relative;
    cursor: pointer;
    width: var(--size);
    height: var(--size);
  }

  .title {
    --font-size: calc(var(--size) / 8);

    display: flex;
    align-items: center;
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: var(--font-size);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    transform: translate(-10%, -50%);
    transition: transform var(--duration) var(--ease-out);
    pointer-events: none;
  }

  .title::after {
    content: attr(data-cta);
    display: inline-block;
    margin-left: 1.5vmin;
    font-size: calc(var(--font-size) / 3.25);
    font-weight: 400;
    letter-spacing: 0.125vmin;
    opacity: 0;
    transform: translateX(-25%);
    transition: transform var(--duration) var(--ease-out),
    opacity var(--duration) var(--ease-out);
  }

  .image-wrapper {
    width: var(--size);
    height: var(--size);
    overflow: hidden;
    clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);
    transition: transform var(--duration) var(--ease-out),
    clip-path var(--duration) var(--ease-out);
  }

  .image-wrapper img {
    position: relative;
    width: 120%;
    height: 100%;
    object-fit: cover;
    transform: translateX(-10%);
    transition: transform var(--duration) var(--ease-out);
  }

  .image-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-color);
    mix-blend-mode: multiply;
    opacity: 0;
    transform: translateZ(0);
    transition: opacity var(--duration) var(--ease-out);
  }

  .demo:hover img {
    transform: translateX(0);
  }

  .demo:hover .image-wrapper {
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
    transform: translateX(25%);
    transition-timing-function: var(--bounce-out);
  }

  .demo:hover .title {
    transform: translate(5%, -50%);
    transition-timing-function: var(--bounce-out);
  }

  .demo:hover .title::after {
    opacity: 1;
    transform: translateX(0);
    transition-timing-function: var(--bounce-out);
  }

  .demo:hover .image-wrapper::after {
    opacity: 1;
  }

</style>