s104

Я бы советовал ни в коем случае такое не делать.

Как вариант через псевдокласс.
:hover:after
jsfiddle.net/nhjtptha

Относительные значения padding-top (проценты, то есть) относятся к ширине.

.нашБлок:after{
    padding-top: 100%; /* relative to width! */
    content: "";
    display: block;
}

Очевидно, что значение может отличаться от 100% и таким образом можно указывать нужное соотношение сторон, которое требуется хранить. А вот контент надо располагать внутри абсолютно, иначе растянет наш элемент как не надо.

Пример без лишних элементов на чистом css: jsfiddle.net/b282vtp1/1
Анимированно jsfiddle.net/b282vtp1
И если сама ширина относительная: jsfiddle.net/b282vtp1/2