Make text appear on the side when hover - html

Question

I am using for the first time this forum, so if I am missing some crucial elements let me know.
My goal: I am trying to create 4 clickable image (in a box layout) in which when the mouse goes over, I would like a slight animation to show an icon on the image AND i want at the same time, a descriptive text that would appear on its side of the image.
My situation: I have the images set up in the dimension I want, and the little animation.
My problem: I have tried many, many things, but can t managed to make the text appear on the side of the image when the mouse hovers on the image.
Here is the Html:
<div class="video-container">
<a href="" class="thumb-unit" style="background-image: url(/assets/img/video/thumb1.jpg)">
<div class="thumb-overlay">
<strong>PLAY</strong>
</a> </div>
(above structure 4 times)
And here is the css:
.videos
background: #e1f3f6
h3
margin: 0
text-align: center
font-family: "Quicksand", sans-serif
letter-spacing: 1em
color: #deb75c
padding-top: 70px
font-weight: 300
.video-container
max-width: 930px
margin: 0px auto
padding-top: 88px
padding-bottom: 70px
+clearfix
.thumb-unit
overflow: hidden
display: block
width: 50%
position: relative
padding-top: 20%
background: pink
float: left
background:
position: center center
repeat: no-repeat
size: cover
.thumb-overlay
+position(absolute, 100% 0px null 0px)
height: 100%
background: fade-out(#6693b0, 0.3)
+transition
text-align: center
strong
padding: 30px
display: block
Color: white
font-weight: 400
text-transform: uppercase
font-size: 17px
background:
image: url(/assets/img/icon/play.png)
position: center 70px
repeat: no-repeat
h4
border: 2px solid red
position: absolute!important
width: 300px!important
right: 300px!important
visibility: visible!important!important
&:hover .thumb-overlay
+position(absolute, 0% 0px null 0px)
as you can see, the code reflects my current situation.
If you have any insights, thank you very much!!!

Answer 1

i have slightly adjusted your code, not sure what else is on your page but hopefully this will make sense and you can add it into your code.
<div class="video-container">
<a href="#">
<div style="background-image:url('Thumb.jpg');">
<strong>PLAY</strong>
</div>
<div>
This is the display text you want to display.
</div>
</a>
</div>
and the css
.video-container
{
width:100px;
height:100px;
margin: 5px;
float:left;
}
.video-container > a > div:nth-child(1)
{
height:100px;
width:100px;
float:left;
}
.video-container > a > div:nth-child(2)
{
display:none;
height:100px;
width:100px;
margin:-100px 0px 0px 100px;
float:left;
}
.video-container > a:hover > div:nth-child(2)
{
display:block;
}
i think it works how you want, its hard as not sure what the other code on your page is etc. i have changed some dimensions to make it a bit easier to work with. any comments on this will be greatfull