[fenix_63]

Всем привет. Хочу закрасить у блока border при наведении курсора, по аналогии как вот тут сделано:

https://codepen.io/giana/full/yYBpVY/


Вот мой код: https://jsfiddle.net/aum95wto/

А именно самый первый блок Draw.

Пока у меня есть вот такой вот код:

<div class="center">
		<div class="block">
			123
		</div>
	</div>

Стили:

.center{
			width: 80%;
			margin: 0 auto;
		}

		.block{
			width: 100px;
			height: 100px;
			border-color: blue;
			box-shadow: inset 0 0 0 2px blue;
			border: 0;
			transition: color 1s;
			/*animation: left_to_right 0.5s ease-in-out infinite alternate;*/	
		}

		.block:hover{
			border-color: red;
		}

		.block::before{
			top: 0;
    		left: 0;
    		width: 0;
		    height: 0;
			border: 2px solid transparent;
		}

		.block::after{
			bottom: 0;
    		right: 0;

    		width: 0;
		    height: 0;
			border: 2px solid transparent;
		}

		.block:hover::before{
			border-top-color: red;
			border-right-color: red;
			transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
			width: 100%;
			height: 100%;
		}

	
		.block:hover::after{
			border-bottom-color: red;
			border-left-color: red;
			transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
			width: 100%;
			height: 100%;
		}

Но нужного эффекта так и не происходит. Вообще при наводке курсора ничего не происходит. Помогите пожалуйста, что я делаю не так.

P.S. Возможно тут JS-анимация требуется, и CSS будет недостаточно, поэтому и пишу сюда.