Text not displaying after image

Question

I am trying to make a food app. This is the section of its Home page

<div class="Offer">
        <h1>What We Can Offer</h1>
        <p>from our hearts</p>
        <div class="circle">
          <img class="img-round" alt="" src={require("./images/round/green-plate.jpg")} />
          <p>Healthy</p>
        </div>
        <div class="circle">
          <img class="img-round" alt="" src={require("./images/Food/popsicle.jpg")} />
          <p>Sweet</p>
        </div>
        <div class="circle">
          <img class="img-round" alt="" src={require("./images/Home/man-dough.jpg")} />
          <p>Classic</p>
        </div>
</div>

But all the text in p tags in not appearing.

this I the css

.circle {
  display: inline-block;
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
  border-radius: 50%;
  margin-left: 125px;
}

circle p{
    font-size: 30px;
    color:black
}


.circle img{
   width: auto;
  height: 100%;
  margin-left: -50px;
}

I want that this text appears after the image

it is looking like this:

Answer 1

Your <p> elements inside the <div class="circle"> elements are hidden by overflow: hidden . You need to make them siblings. You can simply place them in a wrapper div.

 .circle-wrapper { display: inline-block; }.circle { width: 300px; height: 300px; overflow: hidden; border-radius: 50%; }.circle img{ width: auto; height: 100%; }.circle-wrapper p { font-size: 30px; color:black }

 <div class="Offer"> <h1>What We Can Offer</h1> <p>from our hearts</p> <div class="circle-wrapper"> <div class="circle"> <img class="img-round" alt="" src="https://via.placeholder.com/300" /> </div> <p>Healthy</p> </div> <div class="circle-wrapper"> <div class="circle"> <img class="img-round" alt="" src="https://via.placeholder.com/300" /> </div> <p>Sweet</p> </div> <div class="circle-wrapper"> <div class="circle"> <img class="img-round" alt="" src="https://via.placeholder.com/300" /> </div> <p>Classic</p> </div> </div>

Answer 2

your image height should be less than 100% and then your

text align must be center

 .circle img { width: auto; height: 85%; margin-left: -50px; }.circle p{ text-align:center }

 <div class="Offer"> <h1>What We Can Offer</h1> <p>from our hearts</p> <div class="circle"> <img class="img-round" alt="" src={require("./images/round/green-plate.jpg")} /> <p>Healthy</p> </div> <div class="circle"> <img class="img-round" alt="" src={require("./images/Food/popsicle.jpg")} /> <p>Sweet</p> </div> <div class="circle"> <img class="img-round" alt="" src={require("./images/Home/man-dough.jpg")} /> <p>Classic</p> </div> </div>

Answer 3

That's because the circle's border hides your p text.

You can solve it in few ways:

• Reduce border-radius percentage
• Cancel overflow: hidden property
• text-align: center the p itself - which is the preferable option.

To ease your understanding on how the circle come into an effects, color its background (later just revert this). This way, you can see easily what the problem is.