Div au hover

Hello,

j'aimerais faire apparaître la div specialmargin au hover de l'icône fa-desktop.
Quelqu'un aurait-il une piste? Je pense être sur la bonne piste mais pas moyen.

Voici mon code :

      <div class="col-lg-3 col-sm-3">
                  <span class="fa fa-desktop fa-2x"></span>
              </div>

        <div class="col-lg-3 col-sm-3">
                  <span class="fa fa-crop fa-2x"></span>
                      </div>

      <div class="col-lg-3 col-sm-3">
                    <span class="fa fa-camera fa-2x"></span>
                        </div>

      <div class="col-lg-3 col-sm-3">
                    <span class="fa fa-group icons fa-2x"></span>
                        </div>

          <div class="row">

            <div class="col-lg-12 specialmargin">
            <h2 class="title">Webdesign</h2>
            </div>

          </div>

.specialmargin {
  display: none;
  margin-top: 30px;
  margin-left: -40px;
  background: rgba(0,0,0,0.3);
  width: 350px;
  height: 150px;
  border-radius: 20px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  text-align: center;
  -webkit-box-shadow: 11px 10px 14px -10px rgba(0,0,0,0.75);
  -moz-box-shadow: 11px 10px 14px -10px rgba(0,0,0,0.75);
  box-shadow: 11px 10px 14px -10px rgba(0,0,0,0.75);
}

.fa-desktop:hover ~ .specialmargin {display:block;}

Merci d'avance!
Modifié par wstd (13 Jun 2018 - 19:21)