4 206 Codepen

Глитч эффект на CSS при наведении

При наведении на изображение воспроизводится глитч эффект. Сделано на CSS за счет использования одного и того же изображения несколько раз.

HTML

<main>
  <div class="c-glitch" style="background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/204808/night-street-seoul-south-korea-shutterstock_578475466-1.jpg');">
    <div class="c-glitch__img" style="background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/204808/night-street-seoul-south-korea-shutterstock_578475466-1.jpg');"></div>
    <div class="c-glitch__img" style="background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/204808/night-street-seoul-south-korea-shutterstock_578475466-1.jpg');"></div>
    <div class="c-glitch__img" style="background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/204808/night-street-seoul-south-korea-shutterstock_578475466-1.jpg');"></div>
    <div class="c-glitch__img" style="background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/204808/night-street-seoul-south-korea-shutterstock_578475466-1.jpg');"></div>
    <div class="c-glitch__img" style="background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/204808/night-street-seoul-south-korea-shutterstock_578475466-1.jpg');"></div>
  </div>
</main>

SCSS

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи