Create a css responsive circle with centered text content inside an image container

Question

I need to create a circle with text inside , centered. This circle must be inside an image full width container. Html should look like this:

<div class="class-img">
    <img src="static/img/class-home.png" class="img-responsive" alt="">
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <div class="circle">
                    <div class="caption-text"></div> 
                </div>
            </div>
        </div>
    </div>
</div>

Could you tell me how to make this circle and style it to be in the top middle of the container image? I'm using bootstrap 3

This is an snapshot of what I want to create:

so you want the circle next to the image...can you add a snapshot of what is the expected — Geeky, Nov 09 '16 at 05:17
not sure if this helps you http://codepen.io/sahithiK/pen/qqOZZN — Geeky, Nov 09 '16 at 05:25

score 0 · Answer 1 · answered Nov 09 '16 at 06:22

0

Use img-circle with bootstrap to get image as circle

To create a circle use this css

#circle {
    width: 100px;                    //Change  values
    height: 100px;                  //Change  values
    background: red;               //Change color here
    -moz-border-radius: 50px;     //Change  values
    -webkit-border-radius: 50px; //Change  values
    border-radius: 50px;        //Change  values

}

answered Nov 09 '16 at 06:22

Rajeev Radhakrishnan

954
9
17

I don't need an image as circle but a circle inside of the image with a caption text inside. – Daniela Avendaño Nov 09 '16 at 14:26
Refer http://stackoverflow.com/questions/16615403/css-how-to-draw-circle-with-text-in-middle – Rajeev Radhakrishnan Nov 09 '16 at 14:31

score 0 · Answer 2 · answered Nov 09 '16 at 23:34

.class-img{


}

img{height:500px;width:500px;}
.container{
    position: absolute;
    left: 200px;
    top: 150px;
  
}

.circle{
  background:red;
 
  width:150px;
  height:150px;
  border-top-left-radius:110px ;
    border-top-right-radius:110px ;
    border-bottom-right-radius:110px ;
   border-bottom-left-radius:110px ;
}
.caption-text{
  text-align:center;
  padding:50px;
}

<div class="class-img">
    <img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png"  class="img-responsive" alt="">
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <div class="circle">
                    <div class="caption-text">hello</div> 
                </div>
            </div>
        </div>
    </div>
</div>

Hope this helps

Create a css responsive circle with centered text content inside an image container

2 Answers2