Html/css capricieux

Bonjour,

voila j'ai 5 boutons utilisant la balise href, je désire afficher deux texte différent a deux endroit différent au moment ou mon curseur survole le bouton en question.

chaque bouton a ses propre texte qui lui son dédié, mais la position reste la même.
j'utilise le framework bootstrap 4.

voici ma tentative :

  
  <a  name="redirection"></a>
  <section class="bg-light-gray bounds">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">

          <p id="txt1">blabla n°1 paragraphe 1</p>
          <p id="txt2">blabla n°2 paragraphe 1</p>
          <p id="txt3">blabla n°3 paragraphe 1</p>
          <p id="txt4">blabla n°4 paragraphe 1</p>
          <p id="txt5">blabla n°5 paragraphe 1</p>
          <p id="txt6">blabla n°6 paragraphe 1</p>

          <div class="posi">
            <nav class="menu">
              <input id="menu-button" type="checkbox" href="#" checked="checked" class="menu-button"/>

              <label for="menu-button" class="menu-button-icon">
                <span class="hamburger hamburger-bar-1"></span>
                <span class="hamburger hamburger-bar-2"></span>
                <span class="hamburger hamburger-bar-3"></span>
              </label>

              <a href="#" rel="nofollow noopener noreferrer" target="_blank" class="menu-item" id="popup1"><i class="fa fa-cube"></i></a>
              <a href="#" rel="nofollow noopener noreferrer" target="_blank" class="menu-item" id="popup2"><i class="fa fa-flag"></i></a>
              <a href="#" rel="nofollow noopener noreferrer" target="_blank" class="menu-item" id="popup3"><i class="fa fa-heartbeat"></i></a>
              <a href="#" rel="nofollow noopener noreferrer" target="_blank" class="menu-item" id="popup4"><i class="fa fa-handshake-o"></i></a>
              <a href="#" rel="nofollow noopener noreferrer" target="_blank" class="menu-item" id="popup5"><i class="fa fa-wechat"></i></a>
              <a href="#" rel="nofollow noopener noreferrer" target="_blank" class="menu-item" id="popup6"><i class="fa fa-map-o"></i></a>
            </nav>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12">

          <p id="txt1">blabla n°1 paragraphe 2</p>
          <p id="txt2">blabla n°2 paragraphe 2</p>
          <p id="txt3">blabla n°3 paragraphe 2</p>
          <p id="txt4">blabla n°4 paragraphe 2</p>
          <p id="txt5">blabla n°5 paragraphe 2</p>
          <p id="txt6">blabla n°6 paragraphe 2</p>

        </div>
      </div>
    </div>
  </section>

et voici les class qui lui sont associé (pour un soucis de clarté je ne vous procure que les plus concerner)

#txt1,#txt2,#tkt3,#txt4,#txt5,#txt6{
     opacity: 0;
}
#popup1:hover + #txt1{
     opacity: 1;
}
#popup2:hover + #txt2{
     opacity: 1;
}
#popup3:hover + #txt3{
     opacity: 1;
}
#popup4:hover + #txt4{
     opacity: 1;
}
#popup5:hover + #txt5{
     opacity: 1;
}
#popup6:hover + #txt6{
     opacity: 1;
}