藝術文字懸停下圖像

Question

我有一些社交圖標。他們圍繞懸停中心點旋轉360度。我想將文字放置在懸停的圖標下方。我不知道該怎麼做。

目前我有：

<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> 

這裏是例子：https://jsfiddle.net/prathprabhudesai/ga2evj7a/

我想一個文本顯示在圖標的下方。如下圖所示。

有人可以幫助我。提前致謝。

Answer 1

首先讓我們說，如果效果總是相同的話，您實際上不需要爲每個單個按鈕複製：hover css，因爲css樣式將僅應用於當前的元素有狀態：懸停，所以我清理了一下你的css刪除了一些不必要的行。此外，由於您必須添加新元素（文本），並且您希望它在圖標旁邊更改樣式時，我將所有元素都包裝到父元素中，併爲其指定了一個名爲「social-group」的類， 。

我刪除了一些圖標，只是爲了使代碼看起來更清晰。你可以按照這個例子把它們放回去。您可能還想將某種樣式應用於'.social-text'類。

<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>