Div with transparent background

Div with transparent background

The div that has the background and the opacity needs to be positioned absolute with lower z-index that the content you want to show

Codepen example: http://codepen.io/rizopoulos/pen/MyMKzq

HTML markup:

<div class="items">
   <div class="item">
      <div class="overlay"></div>
      <div class="item__inner">
         ... Place here your content ...
      </div>
   </div>
</div>

CSS:

.items {
   background: #eb4c8b;
   padding: 20px;
   text-align: center;
}
.item {
   display: inline-block;
   position: relative;
   padding: 10px;
   border: 10px solid rgba(255,255,255,0.4);
   margin: 20px;
   border-radius: 100%;
   width: 200px;
   height: 200px;
   overflow: hidden;
}
.overlay{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 5;
   background-color: #000;
   opacity: 0.6;
}
.item__inner {
   color: #fff;
   position: relative;
   z-index: 10;
   top: 50%;
   transform: translateY(-50%);
}

Codepen example: http://codepen.io/rizopoulos/pen/MyMKzq