芸術的なテキストの上にホバーの画像以下

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

最初に、効果が常に同じであれば、各ボタンのホバー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>