Как выбрать только один дочерний элемент при :hover (css)?

Пример кода: https://codepen.io/anon/pen/rZBvJm
В общем, если на серый фон навести — вращаться начинает и ромбик и картинка (кот).
А если навести на кота, то ромбик вращается, а кот как бы нет (точнее он начинает вращаться в противоположную сторону, как бы компенсируя вращение родителя).

Хочется сделать так, чтобы вращался только ромбик, вне зависимости от того, куда курсор навели.
При этом не менять хтмл и, само собой, без js :)