hover и переменные из JavaScript

[Snowmaze]

Здравствуйте. Я создал в CSS класс и применил его к двум картинкам. И сделал hover:

.imgs:hover{
width: var(--rand);
left: var(--rand);
top: var(--rand);
transform: rotateZ(360deg);
}

По идее картинки должны перемещаться в рандомную точку и размер также, но 1 картинка, к которой я применил класс работает нормально, а вторая меняет размер и точку всегда одинаково,хотя числа всегда разные в --rand. Почему так работает?И как это исправить?

[Snowmaze]

http://jsfiddle.net/Snowmaze/524y822e/

[Naive]

var red = document.querySelector('.imgs');

потому что ты берешь только первый элемент