0

アイコン(フォントの素晴らしいアイコン「fa-video-icon」を使用)とテキスト見出し「ビデオチュートリアル」を含むボックス要素があります。これは次のとおりです。

<a class="box" href="http://mylinkhere"><div class="heading-icon"><i class="fa fa-video-camera"></i></div>Video Tutorials</a>

私が達成したいのは、人々がボックスをホバーして、ボックスの代わりに背景画像を表示することです。ボックスは表示されず、背景画像のみが表示されます。

.box {
border: 1px solid #ddd;
display: inline-block;
height: 170px;
line-height: 1.1;
margin-bottom: 20px;
margin-bottom: 2rem;
margin-right: 15px;
margin-right: 1.5rem;
padding: 10px;
padding: 1rem;
position: relative;
text-align: center;
vertical-align: top;
width: 155px;
font-size: 18px;
font-size: 1.2857143rem;
font-weight: 700;
color:#222;

}

.heading-icon {
font-size: 55px;
font-size: 4rem;
color:#8C0921;
margin-bottom: 1rem;
}

あなたの助けに感謝!

4

1 に答える 1