Как сделать подобную анимацию на странице?

Question

[ZaurK]

Здравствуйте!
Подскажите, пожалуйста как сделать такую анимацию как на сайте в блоке Our Services,
при наведении курсора?

Comments

[Justique]

А что Вам мешает открыть инспектор и посмотреть стили?

[Hyubert]

Хитро там зделано. с помощу псевдоелементов, посмотрите через инспектор.
Если в двух словах то два квадрата с бордером только на двух сторонах и размером на 35 пикселей меньше врапера, по наведению

width: 100%;
height: 100%;
border-color: yellow;

[ZaurK]

Justique, в инспекторе смотрел, там путано очень, думаю, вдруг может это какая библиотека js

[Justique]

ZaurK, Обрадую Вас и скажу что это не библиотека, посмотрите у блока есть псевдоэлемент before, в том же инспекторе правок кнопкой в dom дереве сделайте триггер на hover и всё станет понятно.

Answer 1

[Ivan Bogachev]

...может это какая библиотека js... ...и с помощью js менять длину...

Не нужен тут никакой JS, только два псевдоэлемента, :hover и transform: scale - codepen

Comments

[ZaurK]

О, кажется то, что нужно, благодарю! Попробую и отпишусь

[ZaurK]

Вроде получилось, спасибо за наводку, less интересная штука

Answer 2

[Socrates]

возможно самое глупое решение, но взять блок, внутри разместить 4 спана и с помощью js менять длину.

Comments

[Socrates]

основному блоку сделать display: relative; спанам внутри сделать display:absolute; и прижать спаны к краям блока, left:0 top:0 и тд

[Socrates]

но там хитрее чутка сделано, но тоже изи. инспектор открой и глянь.

Answer 3

[Дима Долготер]

псс
парень. инструменті разработчика)))