'Images go vertical after adding css fade effect

hello i have some images that when clicked open into new windows. When i add this to html and css they go from hotizontal to messy vertical:

<div class="fade-in-image">

.fade-in-image {
  opacity: 50%;
}

.fade-in-image:hover {
  opacity:100%;
  transition:opacity 2s
}

i tried adding to html and css respective:

<div class="myImg"> 

.myImg{
    text-align:center;
}

but it didnt work, i think something in my css elsewhere is messing it up from the whole wesbite. Here are my links as they stand:

<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>

thank you for any advise and i will post all website css if needed

htmlcss


Solution 1:[1]

Is this what you're trying to do?

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 fnostro

Related Questions