У меня есть элемент box со значком (с использованием шрифта awesome icon "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;
}
Ценю вашу помощь!
HTML:
<a class="box" href="http://mylinkhere">
<span class="heading-icon">
<i class="fa fa-video-camera"></i>
</span>Video Tutorials
</a>
CSS:
.box {
display: inline-block;
height: 170px;
width: 155px;
border: 1px solid #ddd;
text-align: center;
padding:10px;
font-size: 18px;
font-weight:bold;
color:#222;
}
.box:hover {
background-image: url(http://lorempixel.com/output/food-h-g-175-190-3.jpg);
text-indent:-9999em;
}
.box:hover span {
position:absolute;
left:-9999em;
}
.heading-icon {
font-size: 55px;
font-size: 4rem;
color:#8C0921;
margin-bottom: 1rem;
}
Когда поле зависнет, оно устанавливает фоновое изображение и удаляет текст, отступая от экрана. Он также перемещает диапазон, который, как я предполагаю, показывает значок, также и на экране.