How to put text on the left bottom corner of the img, and how to let it stay there when the screen i-CodePudding

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 >
<div >
<a href="#dog">
<img src="https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/256x256/dog.png">
<div >
  <span>dog</span>
</div>
</a>
</div>
<div >
</div>
</div>

CodePudding user response：

you can do it with very simple css code.

Try this:

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

CodePudding user response：

You can add position: absolute with the bottom-left alignment to your .box-one span which is your text element

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

.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;
  top: 0px;
  opacity: 0;
  transition: 0.5s ease;
}

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

.container-one:hover .box-one {
  opacity: 1;
}

span {
  text-decoration: none;
  color: red;
}

<div >
  <div >
    <a href="#dog">
      <img src="https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/256x256/dog.png">
      <div >
        <span>dog</span>
      </div>
    </a>
  </div>
  <div >
  </div>
</div>