悬停图像下面的艺术文本

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>