How to add a background image on hover for a div with several elements - html

Question

I'm having a box element with an icon (using font awesome icon "fa-video-icon") and text heading "Video Tutorial", here it is:
<a class="box" href="http://mylinkhere"><div class="heading-icon"><i class="fa fa-video-camera"></i></div>Video Tutorials</a>
What I want to achieve is when people hover the box to display a background-image instead of the box. The box should not appear, only the background-image.
.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;
}
Appreciate your help!

Answer 1

The HTML:
<a class="box" href="http://mylinkhere">
<span class="heading-icon">
<i class="fa fa-video-camera"></i>
</span>Video Tutorials
</a>
The 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;
}
The fiddle.
When the box is hovered over, it sets the background image, and removes the text by indenting it off of the screen. It also moves the span, which I'm assuming shows the icon, off of the screen as well.