Html 如何为超链接图像添加悬停效果？

我创建了带有图像（社交媒体图标）的社交媒体Hyperlick，并希望在这些图像上添加一个悬停效果，但该效果不起作用。我正在尝试将悬停效果添加到超链接标记中的图像中

我的代码是：

<div class="icons">
  <a href="ex.fb link here">     <img class="fb"     src="images/fb.png"> </a>
  <a href="insta">               <img class="insta"  src="images/insta.png"> </a>
  <a href="//wa.me/number">      <img class="whatsapp" src="images/whatsapp.png"> </a>
  <a href="youtube.com/channel"> <img class="yt"     src="images/yt.png"> </a>
</div>

但此代码在live网页上不起作用：(

---

（我对本地和实时网页都有相同的index.html，但此代码仅在本地主机页面中工作。）

用户

：hover

a{
宽度：150px；
显示：内联块；
}
img{
宽度：100%；
}
/*选择任何

试试

。图标a:hover img{opacity:.5}

非常感谢您，先生，我到处搜索，但没有找到：）此语法在本地主机网页上运行良好，但在实时网页上不起作用。网页的url是什么？它在最底部的url上运行良好

.icons a:hover img{
  opacity: .2;
  transition: all .75s;
  -webkit-transition: all .75s;
}