Position text so that it appears inside an image

user_13280840 0
Viewed 63

I am new at coding and I have been trying to look for a solution for this but I haven't found anything so far. My problem is the text shows up outside of the div. Like this.

I have only been able to have the text inside if I don't use border-radius but I would like to keep it.

This is the code:

div.polaroid {
  text-align: center;
  padding: 50px 50px;
}

div.prod-img {
  border-radius: 35%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
  padding: 0px 0px 70px 0;
}
<div class="col-lg-4 polaroid">
  <a href=""> <img class="prod-img" src="" alt="" />
  </a>
  <div>
    <p>  Name 1 </p>
  </div>
</div>

css text html
2 Answers

apparently he is inside the div, but for the most part he is being occupied by the image.

You can try to fix this either by the position property as stated above, or if you want to do this in the most manual way possible, you can use the margin-top to move it upwards, like:

<p style="margin-top: -25px"> Name 1 </p>
user_125687110

You can use position:absolute to take the bottom div out of the normal HTML flow and position it overtop the elements preceeding it.

position:absolute will allow you to position the div from the top/left of the first parent div that is not the default (position:static) -- usually, we use position:relative as in below example. If there is no parent div that is positioned relative/fixed/absolute (i.e. they are all still at their default value of position:static, then the absolute element will be positioned from the body element.

Together with position:absolute, you can also use the css z-index to raise or lower an element above/below the others. So, for example, if you had several divs that were positioned absolute, you could decide what sits on top of what using z-index.

div.polaroid {
  position:relative;
  text-align: center;
  padding: 50px 50px;
  border:1px solid red;
}

.prod-img {
  border-radius: 35%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
  padding: 0px 0px 70px 0;
}

#onTop{
  position:absolute;
  top: 120px;
  left: 370px;
}
<div class="col-lg-4 polaroid">
    <a href=""> <img class="prod-img" src="http://placekitten.com/250/50" alt="" /></a>
    <div id="onTop">
      <p>  Name 1 </p>
    </div>
</div>

References:

https://www.freecodecamp.org/news/how-to-understand-css-position-absolute-once-and-for-all-b71ca10cd3fd/

https://www.lifewire.com/absolute-vs-relative-3466208

user_14475090
Related