I need to place text on top of an image that is responsive (I'm using bootstrap 4). But the text is left out, I try to replicate this letter (the figures that are outside do not). The text is left out.
This is the code I have:
#content_div_one_photo {
height: 16rem;
width: 11rem;
border-radius: 10px;
border: 5px solid black;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<div id="padre">
<img id="content_div_one_photo" class="img-fluid card-img" src="https://isstatic.aoverflow.com/aRTiRm.jpg">
<div class="card-title">Nombre</div>
</div>
The trick is to put a relative position on the parent and an absolute position on the name. That way it will be placed absolutely with respect to the parent.
I hope that with this example I can help in your doubt, the image remains in a relative position and the text in an absolute position to be able to raise it above the image with the top property, and give it a width of 100% so that the image scales