Максим

https://codepen.io/topicstarter/pen/MWaKYgZ - transition-delay: 0.34s

С разной длинной

Фон и прочее поменяете

Если вставить SVG как img или как background то теряется возможность анимации
Если же SVG просто статичная картинка то разницы нет

фон укажите в rgba то есть red,green,blue,aplha и записывается это так: rgba(255,0,0,0.5) где 0.5 это прозрачность

у меня поместился placeholder

Примерно так

В href замените изображение


Или css clip-path

https://codepen.io/topicstarter/pen/jOPGMeL

Есть обычный контейнер - который в моём примере 768px
Есть контейнер шире - в моём случае это 100%
Вот так делается такая вёрстка ...

Для не стандартной ситуации применяем SVG

В представленном svg ни строчки о анимации ..
Должен быть тег animate
На stackoverflow : https://ru.stackoverflow.com/a/1085734/308951 я кучу раз делал этот эффект без js

https://stackoverflow.com/a/60395056/6339052

На английском SO дали один единственный верный ответ ...я в никся и действительно задача которую я не знал

<svg id="svg" viewBox="0 0 1000 1000">
    <defs>
        <linearGradient id="grad" x1="7%" y1="0%" x2="93%" y2="100%" >
            <stop offset="0%" style="stop-color:rgb(255,29,139);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
        </linearGradient>
        <pattern id="bg" x="0" y="0" width="20" height="20" viewBox ='0 0 80 80' patternUnits="userSpaceOnUse">
            <circle fill="0x0" cx="3" cy="3" r="2.5"></circle>
        </pattern>

        <pattern id="both" width="100%" height="100%">
           <rect width="100%" height="100%" fill="url(#grad)"/>
           <rect width="100%" height="100%" fill="url(#bg)"/>
        </pattern>
    </defs>
  <g>
    <path id="path3" d="M0,0 1000,0 1000,1000 0,1000z"  fill="url(#both)"></path>
  </g>
</svg>

вот готовое

https://freetemplates.pro/preview/?template=cuda

Это примерно так ...надо иметь в разметке блок который будет рядом с блоком который может иметь на него влияние либо вызывать событие mousemove на javascript

Ну и разумеется что z-index (любое позиционирование кроме static )который отобразит блок выше чем тот самый overlay

На css это делается так:

https://codepen.io/topicstarter/pen/XWbWzzy - так тоже можно - сделать обёртку для верхнего блока и для нижнего и этой обёртке установить фон - эту карту