У меня есть svg иконки социальный сетей - вк, телеграм, инста. Также, у меня есть их более прозрачные, такие же картинки социальных сетей. Как мне сделать так, чтобы при наведении на картинку соц. сети она либо меняла цвет, либо меняла свою иконку на такую же, но более прозрачную? Это надо делать через :hover или как-то по другому?
.top {
position: relative;
max-width: 100%;
height: 790px;
background: #F4F4F4;
.header {
position: absolute;
max-width: 1180px;
height: 80px;
top: 20px;
left: 370px;
background: #E73D66;
border-radius: 90px;
display: flex;
list-style-type: none;
}
.logo {
padding-top: 18px;
padding-bottom: 18px;
padding-left: 40px;
}
.logo-2 {
padding-top: 23px;
padding-bottom: 24px;
padding-left: 15px;
}
.pages {
padding-left: 40px;
padding-top: 30px;
padding-bottom: 30px;
height: 20px;
font-family: 'rubik';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 20px;
text-transform: uppercase;
color: #FFFFFF;
}
.pages:nth-child(3) {
padding-left: 141px;
}
.media {
padding-left: 30px;
padding-top: 28px;
}
.media:nth-child(7) {
padding-left: 174px;
}
.media:last-child {
padding-right: 40px;
}
.media-img__inst {
cursor: pointer;
}
.media-img__vk {
cursor: pointer;
}
.media-img__telegr {
cursor: pointer;
}
}
<div class="top">
<ul class="header">
<li><img class="logo" src="img/logo-dogs.svg" alt="logo"></li>
<li><img class="logo-2" src="img/logo4.svg" alt="logo-2"></li>
<li class="pages">О приюте</li>
<li class="pages">Питомцы</li>
<li class="pages">Полезные советы</li>
<li class="pages">Контакты</li>
<li class="media"><img class="media-img__inst" src="img/Instagram.svg" alt="instagram"></li>
<li class="media"><img class="media-img__vk" src="img/vk.svg" alt="vk"></li>
<li class="media"><img class="media-img__telegr" src="img/telegram.svg" alt="telegram"></li>
</ul>
<img class="bg-dogs" src="img/bg-dogs.png" alt="">
<h3 class="top-promo">ПРИЮТ ДЛЯ СОБАК <span style="color: #E73D66;">ЧЕТЫРЕ ЛАПЫ</span></h3>
<h1 class="top-promo__big">ВОЗЬМИ ДРУГА <span style="color: #E73D66;">ДОМОЙ</span></h1>
</div>