艺术文字悬停下图像

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>