Как реализовать подобную вещь на сайте с помощью css и js?

Question

[Alexander Karpov]

То что с левой стороны это без наведения, то что с правой стороны с наведением. Анимация должна идти с правого угла как-бы наискось. безусловно поддержка IE8 и выше)

возможно месяц бессонных ночей дает о себе знать но до меня не доходит.
Если есть примеры или готовый вариант - то вы возможно сделаете меня безумно счастливым человеком)))

Answer 1

[Тимур Яхин]

Несколько иначе сделал:
1. Слой заливается под углом с помощью border (поддержка IE8)
2. По hover родительского блока меняем толщину border до вдвоебольшей чем размер родительского блока
3. Анимация возможна с помощью transition или animate, но ни то, ни другое не поддерживается в IE8
Пример: codepen.io/anon/pen/DpCfk

Answer 2

[ultrbi4]

Я бы сделал так.

1) transform: translateY(300px) translateX(300px) rotate (45dg), для слоя фона, если нужна относительное позиционирование, то через absolute.
2) Ширину и высоту этого слоя нужно сделать больше в два раза чем поле документа (например) width: 500px height: 500px
3) а потом по ховеру менять translateY(0) translateX(0)

Comments

[Alexander Karpov]

на примере бы

[Alexander Tartmin]

ага и без поддержки 8го осла бы остались =)

Answer 3

[Alexander Tartmin]

jsfiddle.net/vfrsqpnb/1 - грубовато и не проверял старыми эксплорерами, но работать должно
UPD: добавил два блока для наглядности

Comments

[Иван]

Наведите на блок много-много раз с большой частотой. И зачем использовать js там, где все элементарно делается на чистом css?