懸停圖像下面的藝術文本

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>