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

Question

[Xtray]

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

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

Answer 1

[Владимир Проскурин]

Замените это
.prod-card__img img:hover
на это
.prod-card:hover .prod-card__img img
т.к. иначе, у вас обрабатывался ховер на блок и отдельно на картинку, а нужно обрабатывать для всего один раз, на блоке.

Comments

[Xtray]

Блин, как сам не догадался) Спасибо!