Put play button image on top of video thumbnail image with text bellow them

Question

I want to reproduce this image in html enter image description here

So that would be 3 videos next to each other with a playbuttom image on top of their thumbnail images and text bellow each of them.I made this with bootstrap and css Here is my try.

<div class="container-fluid grey-box">
                <div class="row pt-5">                   
                    <div class="col-12 col-lg-4 text-center">
                        <div>
                            <div class='video-wrapper'>
                                <div><img class="img-fluid image-border" src="https://i.ibb.co/b58hryQ/EPISTROFES2.png"></div>
                                <div class='video-overlay'>
                                    <img class="play-button2" src="https://i.ibb.co/KNvfBVJ/Playe-Button.png">
                                </div>
                            </div>
                            <h2 class="py-5">ΕΠΙΣΤΡΟΦΕΣ</h2>
                        </div>
                    </div>
                </div>
            </div>

and my css

  .video-wrapper {
    height: 100%;
    width: 100%;
    position: relative;
}

.video {
    height: 100%;
    width: 100%;
}

.image-border {
    border: 4px solid #89cdcc;
    border-top-left-radius: 25px;
    border-bottom-right-radius: 25px;    
}

.image-border:hover {
    border: 4px solid #00837a;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.play-button2 {   
    cursor: pointer;
    transition: 0.5s;
    opacity: 0.6;
}

.play-button2:hover {
    opacity: 1;
}

The play-button seems to be placed on top of the image video pretty well but the problem is that I cant add the text bellow the images because every time i try to add a the text bellow the images the playbutton stops beeing on top of the image.

Here is what happens when I try to add for example an h2 bellow the 2 images in the codeenter image description here

Answer 1

 #videos {
    height: 100%;
    width: 100%;
    position: relative;
   display: flex;
}

.image-border {
    border: 4px solid #89cdcc;
    border-top-left-radius: 25px;
    border-bottom-right-radius: 25px;    
}

.image-border:hover {
    border: 4px solid #00837a;
}

.video-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  z-index: 10;
}

.video-background, .video-background .img-fluid{
  height: 300px;
  width: 450px;
  box-sizing: border-box;
}

.video-background{
  position: relative;
}

.play-button2 {   
    cursor: pointer;
    transition: 0.5s;
    opacity: 0.6;
  z-index: 99;
}

.play-button2:hover {
    opacity: 1;
}

.py-5{
  text-align: center;
}

.image-border:hover{
  border-color: red;
}

<div class="container-fluid grey-box">
  <div class="row pt-5">
    <div class="col-12 col-lg-4 text-center">
      <div id='videos'>
        <div class='video-element'>
          <div class='video-background'>
            <img class="img-fluid image-border" src="https://i.ibb.co/b58hryQ/EPISTROFES2.png">
              <div class='video-overlay'>
            <img class="play-button2" src="https://i.ibb.co/KNvfBVJ/Playe-Button.png">
          </div>
            </div>
          <h2 class="py-5">ΕΠΙΣΤΡΟΦΕΣ</h2>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

whenever you add text it adds default margin and padding to the block, I assume that might be the one reason for it. Another option you can try creating a new call for text.