How to write inside an image border

Question

Hello I would like to write inside the border but I could not follow my code

.first-row-sites .img-responsive, .form-sites-container, .second-row-sites .img-responsive {
    border-top: 50px solid #006400;
	  border-radius: 1px;
	   }

<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="second-row-sites">


<a title="Clique para acessar" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/0st9yhngses-benjamin-child.jpg"> <img class="img-responsive" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/0st9yhngses-benjamin-child.jpg" alt="Carta de Serviços da Saúde" /> </a>
</div>

</div>
</div>
</div>

Answer 1

If that’s what you really want... You can create a pseudo element in your link, where the image is inside and in this pseudo element you write the text you want. In fact it will be on the link, but will give the impression that is inside the edge of the image.

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.first-row-sites .img-responsive,
.form-sites-container,
.second-row-sites .img-responsive {
    border-top: 50px solid #006400;
    border-radius: 1px;
}
a {
  display: inline-block;
  width: 100%;
  position: relative;
}
a::after {
  content: 'meu texto aqui';
  position: absolute;
  top: 5px;
  left:5px;
  z-index: 1;
  font-size: 30px;
  color: #fff;
}

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <div class="second-row-sites">
                <a title="Clique para acessar" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/0st9yhngses-benjamin-child.jpg"> 
                  <img class="img-responsive" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/0st9yhngses-benjamin-child.jpg" alt="Carta de Serviços da Saúde" /> 
                </a>
            </div>
        </div>
    </div>
</div>