DIV OVERLAY DIV

HTML

<div class="outer-box">

    <div class="inner-first">
      <img class="imgtitre" src="http://localhost/jds/sites/default/files/img_epreuves/poker_1.jpg" alt="Poker" typeof="Image">
    </div>
    
    
    <div class="inner-second" style="overflow:hidden;">
    
      <div class="titretruc" style="margin: 10px auto 10px auto;  height: 100px;">
         <p style="margin-top: 40px;">Poker</p>
      </div>
      
    </div>
     
</div>

CSS

.outer-box {
  padding: 0;
  position: relative;
  width: 300px;
  height: 300px;
}
.outer-box .inner-first {
  width: 300px;
  min-height: 100%;
  background: red;
}
.imgtitre{
    max-width: 100%;
    height: auto;
}
.titretruc {
    font: 1.4em 'Montserrat', sans-serif;
    max-width: 30%;
    /*position: absolute;*/
   /* left: 100px;*/
  /*  margin-right: 10em;*/
    z-index: 50;
    top: 20px;
    /* top: auto; */
    opacity: 1;
    background-color: rgba(255,255,255,0.3);
    padding-right: 10px;
    padding-left: 10px;
    color: #fff;
}
.outer-box .inner-second {
  padding: 0;
  position: absolute;
  width: 100%;
  min-height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /*opacity: 0.5;*/
/*  background: #FD8698;*/
/*  transition: opacity .5s;
 // */
}