Как сделать красивый ховер эффект на текст с изменением цвета текста внутри?

Question

Всем привет, увидел такой эффект на сайте http://joxi.ru/E2pNyBPcaP5RQr , то есть при наведении на текст появляется что-то типа круга и внутри круга текст другого цвета, не совсем понимаю как это возможно, ведь круг должен перекрывать текст, объясните пожалуйста, как это можно реализовать или может плагин какой есть ?

Answer 1

Моя чуть чуть косячная попытка - но смысл должен быть ясен

(не знаю как поставить svg-circle под курсор и скрыл его)

let item = document.querySelector(".circle");

let x = svg.getBoundingClientRect().x;
let y = svg.getBoundingClientRect().y;



svg.onmousemove = function(e) {

  item.style.position = "absolute"
  item.style.left = e.x - 75 + "px";
  item.style.top = e.y - 75 + "px";
}

.parent {
  position: relative;
  overflow: hidden;
}

.circle {
  width: 150px;
  height: 150px;
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: red;
  mix-blend-mode: exclusion;
}

<div class="parent" id="svg">
  <div class="circle"></div>
  <svg viewBox="0 0 1000 350" xmlns="http://www.w3.org/2000/svg">
   <defs>
     <style>
       
       .r{
         display: none;
       }
       
       text{
         font-size: 80px;
         font-family: sans-serif;
         font-weight: 900;
         text-transform: uppercase;
       }
       
     </style>
     
     <clipPath id="mask">
       <path d="M50,0 200,0 120,300z" fill="red"/>
       <rect x="120" y="150" width="200" height="80" fill="green"/>
       <circle cx="200" cy="120" r="80" fill="blue"/>
       
       
   <rect width="300" height="300" fill="url(#gr)" ry="150" class="r" ></rect>
     </clipPath>
     
   </defs>
  
   <g>
     <path d="M50,0 200,0 120,300z" fill="red"/>
     <rect x="120" y="150" width="200" height="80" fill="green"/>
     <circle cx="200" cy="120" r="80" fill="blue"/>
   </g>
  
  <text x="280" y="100" fill="#fff">blend mode</text>
  
   <circle r="100" fill="yellow" class="r" clip-path="url(#cp)" id="rect" />         
</svg>
</div>

БЛОГ НА HUSL

Как сделать красивый ховер эффект на текст с изменением цвета текста внутри?

Ответы (1 шт):