Is there a way to make both of my icons display some text when hovered over? I managed to make it work, but the leftmost icon doesn't trigger the span element when hovered. The text needs to appear on the left side of the Yelp icon for design reasons. You can find the code below or check out the Codepen link: https://codepen.io/ChumperDumper/pen/MWgoEpL
I attempted to wrap the text that should be faded in with the icon, but Font Awesome behaves strangely when attempting this.
.fa-yelp {
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
color: red;
margin: 1rem 2.5rem 1rem 0;
}
.fa-yelp:hover {
transform: rotate(-20deg);
}
.fa-yelp:hover~.text-bubble-yelp {
opacity: 1;
transition: opacity 0.5s ease-in;
}
.fa-twitter {
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
color: #1DA1F2;
margin: 1rem 0 1rem 2.5rem;
}
.fa-twitter:hover {
transform: rotate(20deg);
}
.fa-twitter:hover~.text-bubble-twitter {
opacity: 1;
transition: opacity 0.5s ease-in;
}
.text-bubble {
opacity: 0;
transition: opacity 0.5s ease-out;
position: static;
vertical-align: 25px;
font-weight: bold;
font-size: 1.5rem;
margin: 0 2rem
}<meta charset="utf-8">
<title>Website</title>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- Welcom Section -->
<section id="welcome">
<span class="text-bubble text-bubble-yelp">Review us on Yelp!</span>
<span class="logo fab fa-yelp fa-3x"></span>
<span class="logo fab fa-twitter fa-3x"></span>
<span class="text-bubble text-bubble-twitter">Follow us on Twitter!</span>
</section>The expectation was for it to select the sibling element, but it appears that it won't pick a sibling element that precedes itself. :/