CODEWITHSUNDEEP
csshtml
StripyTiger
StripyTiger

Reputation: 1037

css circle with text overlayed on an image

I am trying to overlay a circle over a square image. The text needs to be centered hoziontally and verticaly in the circle.

I have almost got it right with a square div, but as soon as I put an image into the mix, the circle moves below the image.

My code.

.Container {
  width: 300px;
  height: 300px;
}

.Square {
  height: 100%;
  width: 100%;
  background-color: yellow;
}

.Square img {
  width: 100%;
  height: 100%;
}

.Circle {
  position: relative;
  height: 70%;
  width: 70%;
  top: 15%;
  left: 15%;
  background-color: rgba(0, 0, 200, 0.5);
  border-radius: 50%;
  /*80px;*/
  margin-bottom: 50%;
  /*30px; */
  float: left;
  margin-right: 20px;
}

.Circle h3 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 50%;
  height: 30%;
  margin: auto;
  text-align: center;
}
<div class="Container">
  <div class="Square">
    <img src="SiteData/Images/ProfilePics/ProfileImg.png" />

    <div class="Circle">
      <h3>Words Here</h3>
    </div>
  </div>
</div>

The Container will ultimately be of variable width, determined by bootstrap col

Upvotes: 1

Views: 1829

Answers (1)

Terry
Terry

Reputation: 66103

Since you want to position your circle over the image, you have to use position: absolute instead of relative. This will take it out of the document flow and you can position it anywhere you want within the parent element.

In order for this to work, you will also have to declare position: relative on the parent.

See proof-of-concept example below:

.Container {
  width: 300px;
  height: 300px;
}

.Square {
  height: 100%;
  width: 100%;
  background-color: yellow;
  position: relative; /* To allow children to be absolutely positioned */
}

.Square img {
  width: 100%;
  height: 100%;
}

.Circle {
  position: absolute; /* Use absolute positioning */
  height: 70%;
  width: 70%;
  top: 15%;
  left: 15%;
  background-color: rgba(0, 0, 200, 0.5);
  border-radius: 50%;
  /*80px;*/
  margin-bottom: 50%;
  /*30px; */
  float: left;
  margin-right: 20px;
}

.Circle h3 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 50%;
  height: 30%;
  margin: auto;
  text-align: center;
}
<div class="Container">
  <div class="Square">
    <img src="SiteData/Images/ProfilePics/ProfileImg.png" />

    <div class="Circle">
      <h3>Words Here</h3>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions