Как реализовать подобную вещь на сайте с помощью css и js?
Несколько иначе сделал:
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)