How to put text on the left bottom corner of the img, and how to let it stay there when the screen is resized?

Issue

I am new to programming and I want to make a website where I want to put a text to the left bottom corner of an image. How to put it there and how to let it stay there when the screen is resized. And is my code ok ? or should I change something ? JSFIDDLE

.flex{
  position: relative;
  display: flex;
  justify-content: space-evenly;
}
.container-one a{
  position: relative;
}
img{
  display: block;
  width: 100%;
  height: 100%;
}
.box-one{
  position: absolute;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
  bottom: 0px;
  left: 0px;
  right: 0px;
  top: 0px;
  opacity: 0;
  transition: 0.5s ease;
  
}
.container-one:hover .box-one {
   opacity: 1;
}
 span{
   text-decoration: none;
   color: red;
   float:
 }

<div class="flex">
<div class="container-one">
<a href="#dog">
<img src="https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/256x256/dog.png">
<div class="box-one">
  <span>dog</span>
</div>
</a>
</div>
<div class="container-two">
</div>
</div>

Solution

you can do it with very simple css code.

Try this:

.box-one span {
     position: absolute;
     bottom: 0px;
}

Answered By - RandomCoder