Artistic Text Below Image on Hover
<p>I have some social icons. And they rotate 360 degrees about the center point on hover. I want to place text below those icons on hover. I am not sure how to do it.</p>

<p>Currently I have:</p>

<pre><code>&lt;center&gt;
    &lt;div class="ol-md-3 col-md-offset-5 text-center "&gt;
    &lt;a class="inline_block" href="#" target="_blank"&gt;&lt;div class="social-roll linkedin"&gt;&lt;img src="https://github.com/prathprabhudesai/prathprabhudesai.github.io/blob/master/Icons/linkedin.png?raw=true" width=48 height=48/&gt;&lt;/div&gt;&lt;/a&gt;
  &lt;a class="inline_block" href="#" target="_blank"&gt;&lt;div class="social-roll facebook"&gt;&lt;img src="https://github.com/prathprabhudesai/prathprabhudesai.github.io/blob/master/Icons/facebook.png?raw=true" width=48 height=48/&gt;&lt;/div&gt;&lt;/a&gt;
  &lt;a class="inline_block" href="#" target="_blank"&gt;&lt;div class="social-roll github"&gt;&lt;img src="https://github.com/prathprabhudesai/prathprabhudesai.github.io/blob/master/Icons/github.png?raw=true" width=48 height=48/&gt;&lt;/div&gt;&lt;/a&gt;
  &lt;a class="inline_block" href="#" target="_blank"&gt;&lt;div class="social-roll email"&gt;&lt;img src="https://github.com/prathprabhudesai/prathprabhudesai.github.io/blob/master/Icons/email.png?raw=true" width=48 height=48/&gt;&lt;/div&gt;&lt;/a&gt;
  &lt;a class="inline_block" href="#" target="_blank"&gt;&lt;div class="social-roll skype"&gt;&lt;img src="https://github.com/prathprabhudesai/prathprabhudesai.github.io/blob/master/Icons/skype.png?raw=true" width=48 height=48/&gt;&lt;/div&gt;&lt;/a&gt;
  &lt;a class="inline_block" href="#" target="_blank"&gt;&lt;div class="social-roll soundcloud"&gt;&lt;img src="https://github.com/prathprabhudesai/prathprabhudesai.github.io/blob/master/Icons/soundcloud.png?raw=true" width=48 height=48/&gt;&lt;/div&gt;&lt;/a&gt;
  &lt;a class="inline_block" href="#" target="_blank"&gt;&lt;div class="social-roll spotify"&gt;&lt;img src="https://github.com/prathprabhudesai/prathprabhudesai.github.io/blob/master/Icons/spotify.png?raw=true" width=48 height=48/&gt;&lt;/div&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;/center&gt;

&lt;style&gt;
.inline_block{
   display: inline-block;;
 }

.social-roll {
    margin: 7px;
    float: left;
    border-radius: 50%;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
}

.social-roll.facebook:hover {
   background-color: rgba(255,255,255,0.8);
 box-shadow: 0px 0px 4px 1px rgba(255,255,255,0.8);
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  transform:rotate(360deg);
}


.social-roll.linkedin:hover {
   background-color: rgba(255,255,255,0.8);
 box-shadow: 0px 0px 4px 1px rgba(255,255,255,0.8);
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
   transform:rotate(360deg);
}

.social-roll.github:hover {
background-color: rgba(255,255,255,0.8);
box-shadow: 0px 0px 4px 1px rgba(255,255,255,0.8);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}

.social-roll.email:hover {
  background-color: rgba(255,255,255,0.8);
  box-shadow: 0px 0px 4px 1px rgba(255,255,255,0.8);
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  transform:rotate(360deg);
  }

.social-roll.skype:hover {
  background-color: rgba(255,255,255,0.8);
  box-shadow: 0px 0px 4px 1px rgba(255,255,255,0.8);
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  transform:rotate(360deg);
 }

.social-roll.soundcloud:hover {
  background-color: rgba(255,255,255,0.8);
 box-shadow: 0px 0px 4px 1px rgba(255,255,255,0.8);
 -webkit-transform:rotate(360deg);
 -moz-transform:rotate(360deg);
 -o-transform:rotate(360deg);
 -ms-transform:rotate(360deg);
 transform:rotate(360deg);
}

.social-roll.spotify:hover {
  background-color: rgba(255,255,255,0.8);
  box-shadow: 0px 0px 4px 1px rgba(255,255,255,0.8);
 -webkit-transform:rotate(360deg);
 -moz-transform:rotate(360deg);
 -o-transform:rotate(360deg);
 -ms-transform:rotate(360deg);
  transform:rotate(360deg);
 }
    &lt;/style&gt;
</code></pre>

<p>Here is the example: <a href="https://jsfiddle.net/prathprabhudesai/ga2evj7a/" rel="nofollow noreferrer">https://jsfiddle.net/prathprabhudesai/ga2evj7a/</a></p>

<p>I want a text to appear below the icon. Shown in the picture below.
<a href="https://i.stack.imgur.com/pwWlf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pwWlf.png" alt="Text Below Icon"></a></p>

<p>Can someone help me. Thanks in advance.</p>