Images go vertical after adding css fade effect-CodePudding

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 >

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

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

i tried adding to html and css respective:

<div > 

.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

CodePudding user response：

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>