Как реализовать подобную вещь на сайте с помощью css и js?
То что с левой стороны это без наведения, то что с правой стороны с наведением. Анимация должна идти с правого угла как-бы наискось. безусловно поддержка IE8 и выше)
возможно месяц бессонных ночей дает о себе знать но до меня не доходит.
Если есть примеры или готовый вариант - то вы возможно сделаете меня безумно счастливым человеком)))
Несколько иначе сделал:
1. Слой заливается под углом с помощью border (поддержка IE8)
2. По hover родительского блока меняем толщину border до вдвоебольшей чем размер родительского блока
3. Анимация возможна с помощью transition или animate, но ни то, ни другое не поддерживается в IE8
Пример: codepen.io/anon/pen/DpCfk
1) transform: translateY(300px) translateX(300px) rotate (45dg), для слоя фона, если нужна относительное позиционирование, то через absolute.
2) Ширину и высоту этого слоя нужно сделать больше в два раза чем поле документа (например) width: 500px height: 500px
3) а потом по ховеру менять translateY(0) translateX(0)
Простой
