How to create a circle and a bar that overlap with css?


Tags: html,css,css3,css-shapes

Problem :

For a user profile I'm trying to create a circular image plus a horizontal bar with the same height as the image. Also, it should be responsive. It should look as in the image below. In the black bar there will be text.

enter image description here

Could someone please help me with the correct CSS?
So far I have the code below but this already goes wrong in that the black bar is below the circle and not next to it. But also I don't know how to make the black bar start exactly in the middle of the image, to have the image on top, and to have text in the black bar start sufficiently to the right (while being responsive to screen size).

<div class="col-md-12 profile-topbar">
  <div class="round">
    <img src=<%= image_path('profile.gif') %>>
  </div>
  <div class="text-bar">
    ...
  </div>
</div>

In my CSS file:

.round {
  margin: 2em;
  border-radius: 50%;
  overflow: hidden;
  width: 150px;
  height: 150px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}
.round img {
  display: block;
  width: 100%;
  height: 100%;
}

.text-bar {
  display: inline-block;
  background: #FFF;
  left: 222px; //Problem: not responsive. This block should start exactly halfway from the image.
  width: 100%;
}
.text-bar p {
  left: 250 px;
}


Solution :

you could use figure and figcaption to structure your html.

Inline-block, vertical-align and margin to set image aside text

figure {
  margin-left:50px;/* half image width */
  background:black;
  box-shadow:0 0 1px;
  border-radius:3px;
  }
img {
  border-radius:100%;
  position:relative;/* brings it at front, can trigger z-index too */
  box-shadow:-1px 0 1px, 1px 0 1px white ;/* whatever U like */
  vertical-align:middle;
  right:50px;/* move visually from real position */
  margin-right:-40px;/* pull or push text aside */
  }
figcaption {
  display:inline-block;
  vertical-align:middle;
  color:white;
  }
p {
  margin:0;
  }
<figure>
  <img src="http://lorempixel.com/100/100/people/9" />
  <figcaption>
    <p>some text here  10px away from image</p>
    <p>and more</p>
    </figcaption>
  </figure>


    CSS Howto..

    How to make this double line shape with css?

    How to make an anchor fill the height of its containing div

    How to change the style/css of a tooltip?

    How to make a dynamic layout only by CSS

    How can I create a searchbar like this?

    How does css left / position works with bootstrap header

    How to make submit input and text input equally spaced

    slide show with bootstrap

    Google font shows boxes in Internet Explorer 8 - IE 8

    how to create a multi column list with css?

    CSS: How to change colour of active navigation page menu

    Customizing ebay store HTML and CSS code (How to?)

    How to use the compass transition mixins with a translateX property and autoprefixer?

    How to align both vertically and horizontally in CSS?

    How can I get a label to right align in a table “cell” (td)?

    How to make IE 9 work with Bootstrap Multiselect plugin by davidstutz?

    how to customize css ellipse for a text string [duplicate]

    how to center css class images with text?

    how to make a text ele to the right of a left floated ele automatically occupy the rest width?

    How to transform Menu icon to Arrow icon? [closed]

    How to stop DIV from sticking to left of page when zoom in CSS HTML

    How I write a:hover::before in less file?

    How are these sites implementing their onhover overlays?

    How to center smaller text with bigger css

    How to Make Image Do All 3: Cover (left-to-right), Resize, and Scroll

    How to cancel/disable hover and active effects coming from another CSS library?

    How to add two class styles to anchor tag

    How to resize & move css divisions at same time?

    StackLayoutPanel Shows white ends at the rounded corners

    How to create text block on image using just CSS