<div class="card">
  <img class="card-img"
       src="https://tse1.mm.bing.net/th?id=OIP.y2RhxaX5EKLvYK29mYq4ZgHaH7&pid=Api&P=0&w=300&h=300" alt=" Dark vader">
</div>

<p class="card-title" >stars wars</p>

*,::before,::after{
  box-sizing:border-box;
}

.card{
  width:300px;
  position:relative;
}
.card-img{
  width:100%;
  display:block;
}
.card-title{
  position:absolute;
  bottom:0;
  background:rgba(0,0,0,.75);
  width:100%;
  height:100%;
  color:#fff;
  margin:0;
  padding:1em;
  text-align:center;
}

<div class="card">
  <img class="card-img"
       src="https://tse1.mm.bing.net/th?id=OIP.y2RhxaX5EKLvYK29mYq4ZgHaH7&pid=Api&P=0&w=300&h=300" alt=" Dark vader">
</div>

<p class="card-title" >stars wars</p>

*,::before,::after{
  box-sizing:border-box;
}

.card{
  width:300px;
  position:relative;
}
.card-img{
  width:100%;
  display:block;
}
.card-title{
  position:absolute;
  bottom:0;
  background:rgba(0,0,0,.75);
  width:100%;
  height:100%;
  color:#fff;
  margin:0;
  padding:1em;
  text-align:center;
}

<div class="card">
  <img class="card-img"
       src="https://tse1.mm.bing.net/th?id=OIP.y2RhxaX5EKLvYK29mYq4ZgHaH7&pid=Api&P=0&w=300&h=300" alt=" Dark vader">
</div>

<p class="card-title" >stars wars</p>

*,::before,::after{
  box-sizing:border-box;
}

.card{
  width:300px;
  position:relative;
}
.card-img{
  width:100%;
  display:block;
}
.card-title{
  position:absolute;
  bottom:0;
  background:rgba(0,0,0,.75);
  width:100%;
  height:100%;
  color:#fff;
  margin:0;
  padding:1em;
  text-align:center;
}