mouseoverのソーシャルアイコンにテキストを追加するには

Question

このテキストを追加するコードは、YouTubeのソーシャルアイコンの上にマウスを置くと「Vlog Coming Soon」となります。ありがとう

[social_icons icon="fa-youtube" size="fa-2x" link="https://www.youtube.com/" target="_self" icon_color="#fff" background_color="#1f1f1f"] 

Answer 1

私はちょうどあなたがこれを行うことができるアイデアを与えるためにクイックHTML/CSSを廃止しました。あなたが社会的なアイコンにカーソルを合わせると基本的にはあなたが不透明度0を使用してテキストをオーバーレイがあるでしょう、そして、あなたが解決するために行われているどのくらいの研究1.

li { 
 
    list-style: none; 
 
} 
 

 
li { 
 
    position: relative; 
 
} 
 

 
.overlay-text { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    
 
    width: 100%; 
 
    height: 100%; 
 
    
 
    opacity: 0; 
 
    background: rgba(255, 255, 255, 0.7); 
 
    
 
    transition: opacity 0.3s; 
 
} 
 

 
li:hover .overlay-text { 
 
    opacity: 1; 
 
} 
 
li i { 
 
    font-size: 3em !important; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> 
 

 
<div class="social-wrapper"> 
 
    <ul> 
 
    <li> 
 
     <i class="fa fa-youtube"></i> 
 
     <div class="overlay-text"> 
 
     <h4>Coming Soon!</h4> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
</div>