Artistic Text unter Bild auf Hover

Question

Ich habe einige soziale Symbole. Und sie drehen sich um 360 Grad um den Mittelpunkt beim Schweben. Ich möchte Text unter diese Symbole auf dem Hover platzieren. Ich bin mir nicht sicher, wie es geht.

Zur Zeit habe ich:

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

<style> 
.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); 
} 
    </style> 

ist hier das Beispiel: https://jsfiddle.net/prathprabhudesai/ga2evj7a/

Ich möchte ein Text unter dem Symbol angezeigt. Im Bild unten gezeigt.

Kann mir jemand helfen. Danke im Voraus.

Answer 1

Zuerst sagen wir, dass Sie nicht wirklich den: hover css für jede einzelne Schaltfläche replizieren müssen, wenn der Effekt immer derselbe ist, da der CSS-Stil nur auf die Elemente angewendet wird, die derzeit verwendet werden hat den zustand: schweben, also habe ich ein bisschen dein css aufgeräumt und einige unnötige linien entfernt.

Darüber hinaus, da Sie ein neues Element (den Text) hinzufügen müssen und Sie wollen Stil ändern, während Sie über das Symbol übergeben, wickelte ich alle in ein Elternelement und gab ihm eine Klasse namens "social-group" .

Ich habe einige Symbole entfernt, um den Code sauberer zu machen. Sie können sie nach dem Beispiel zurückstellen. Sie können auch einen Stil auf die Klasse ".social-text" anwenden.

<style> 
.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-group:hover .social-roll { 
    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-text { 
    visibility: hidden; 
} 

.social-group:hover .social-text { 
    visibility: visible; 
} 

</style> 


<center> 
    <div class="ol-md-3 col-md-offset-5 text-center "> 
     <a class="inline_block social-group" href="#" target="_blank"> 
      <div class="social-roll linkedin"> 
       <img src="https://github.com/prathprabhudesai/prathprabhudesai.github.io/blob/master/Icons/linkedin.png?raw=true" width=48 height=48/> 
      </div> 
      <div class="social-text">Linkedin</div> 
     </a> 
     <a class="inline_block social-group" href="#" target="_blank"> 
      <div class="social-roll facebook"> 
       <img src="https://github.com/prathprabhudesai/prathprabhudesai.github.io/blob/master/Icons/facebook.png?raw=true" width=48 height=48/> 
      </div> 
      <div class="social-text">Facebook</div> 
     </a> 
    </div> 
</center>