JSFiddle - React, Tailwind, and code Playground

by Luca De Nardi

HTML

<div class="bg">
  <div class="overlay">
  <p>
  Hello!
  </p>
  </div>
</div>

<!-- Answer to http://stackoverflow.com/questions/35795377/how-can-i-achieve-this-transparency-effect-using-css -->

CSS

html, body, .bg{
  height: 100%;
  overflow: hidden;
}
.bg{
  background: url(http://img.tuttoandroid.net/wp-content/uploads/2014/11/Ultimate-Material-Lollipop-Collection-225.jpg);
  background-size: cover;
}
.overlay{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 200px;
  height: 200px;
  background: transparent;
  border-radius: 50%;
  border: 1000px solid rgba(0, 0, 0, 0.5);
}
.overlay p{
  position: absolute;
  color: black;
  display: block;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}