CSS: Layering icons on top of image/video div on hover - html

Question

I render a div with an image that looks like it's a video (but it's just an image, for performance). When the user clicks on the image, JS swaps out the image with the appropriate youtube embed code and plays the video.
Below the image/video div, I have another div with some action icons (share, like etc). Rather than have the actions below the image/video div, I'd like to put them over the image/video div on:hover. See below image for better description:
Here's the current structure of my code.
The HTML:
<div class="youtube-container col-sm-6 col-lg-4">
<div class="youtube-player" data-id="<%= trailer.youtube_id %>">
<div class="holder">
</div>
</div>
</div>
<div class="row icons">
<div class="icon">
<img src="icon1">
</div>
<div class="icon">
<img src="icon2">
</div>
<div class="icon">
<img src="icon3">
</div>
</div>
CSS:
.icons img {
height: 35px;
margin: -10px 0 0 5px;
}
.icons {
float:left;
margin: 30px 10px 10px 10px;
}
.icon img {
height: 55px;
}
.youtube-container {
display: block;
margin: 20px auto;
width: 100%;
width: 100%;
}
.youtube-player {
display: block; width: 100%; /* assuming that the video has a 16:9 ratio */
padding-bottom: 56.25%;
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
cursor: hand;
cursor: pointer;
display: block;
}
img.youtube-thumb {
bottom: 0;
display: block;
left: 0;
margin: auto;
max-width: 100%;
width: 100%;
position: absolute;
right: 0;
top: 0;
height: auto
}
div.play-button {
height: 72px;
width: 72px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
background: url("http://i.imgur.com/TxzC70f.png") no-repeat;
}
#youtube-iframe { <--- the iframe dynamically generated when someone clicks the image
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
After the page is loaded, Javascript goes through and 1) finds all the .holder divs 2) inserts a dynamically generated image 3) Adds an on.click event listener to .holder that, when clicked, swaps the image for a youtube iframe.
I understand how to implement the "on hover" part, by I need help with CSS and overlaying the icons on top of the image/video.