图片在添加css渐变效果后垂直

Question

你好，我有一些图像，当点击打开到新的窗口。当我将它添加到html和css中时，它们从水平变成了凌乱的垂直:

<div class="fade-in-image">
.fade-in-image {
opacity: 50%;
}
.fade-in-image:hover {
opacity:100%;
transition:opacity 2s
}

我尝试分别添加HTML和CSS:

<div class="myImg"> 
.myImg{
text-align:center;
}

，但它没有工作，我认为我的CSS的其他地方搞砸了它从整个网站。以下是我的链接:

<p>
<a href="https://twitter.com/" target="_blank" rel="noopener noreferrer"><img src="images/twitter.jpg" alt="twitter link" width="110px" height="110px"></a>
<a href="mailto:?subject=Hello&body=hello"><img src="images/google.jpg"  alt="gmail link" width="110px" height="110px"></a>
<a href="https://www.twitch.tv/" target="_blank" rel="noopener noreferrer"><img src="images/twitch.jpg"  alt="twitch link" width="110px" height="110px"></a>
</p>

感谢您的任何建议，如果需要，我会发布所有网站CSS

Answer 1

这就是你想要做的吗?

a>img {
opacity: 50%;
transition: opacity 2s
}
a>img:hover {
opacity: 100%;
}

<p>
<a href="https://twitter.com/" target="_blank" rel="noopener noreferrer"><img src="https://picsum.photos/200/300" alt="twitter link" width="110px" height="110px"></a>
<a href="mailto:?subject=Hello&body=hello"><img src="https://picsum.photos/200/300" alt="gmail link" width="110px" height="110px"></a>
<a href="https://www.twitch.tv/" target="_blank" rel="noopener noreferrer"><img src="https://picsum.photos/200/300" alt="twitch link" width="110px" height="110px"></a>
</p>