Что нужно делать в этой задаче:
Определить состояние по умолчанию для элементов и при наведении менять им ТОЛЬКО цвет
для .card__img
Я описал состояние
.card__img {
border: 3px solid transparent;
filter: invert(100%);
transition: filter var(--timing), border-color var(--timing);
}
Я задал свойства для border, размер, также указал для элемента transition, какие элементы я хочу анимировать. И также я использовал переменную timing, чтобы записать длительность и скорость анимации в одном месте.
При наведении я меняю только свойства filter, которое умеет анимироваться и свойство border-color, которое тоже умеет анимироваться
.card:hover .card__img {
filter: invert(0);
border-color: red;
}
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Roboto", sans-serif;
}
img {
display: block;
max-width: 100%;
border: none;
}
:root {
--timing: 0.5s linear;
}
.card {
display: inline-block;
font-size: 24px;
}
.card>*+* {
margin-top: 15px;
}
.card__title {
transition: color var(--timing);
}
.card__img {
border: 3px solid transparent;
filter: invert(100%);
transition: filter var(--timing), border-color var(--timing);
}
.card:hover .card__title {
color: red
}
.card:hover .card__img {
filter: invert(0);
border-color: red;
}
<div class="card">
<div class="card__title">Заголовок</div>
<div class="card__img">
<img src="https://picsum.photos/id/0/200" alt="">
</div>
</div>