Transparent Box With Text Over Image

I need help to create centered transparent box with text over image. I searched, searched and searched, but I didn't find right answer. Let's say, I have this code:

Copy

CSS

.grid12-6{
  position:relative;
}
.grid12-6 .inner_box{
  position:absolute;
  background:rgba(255,255,255,0.7);
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  padding:35px;
  text-align:center;
}
.grid12-6 .inner_box h2{
  font-family:arial;
  text-align:center;
  font-size:26px;
  font-weight:normal;
  color:#777;
}
.grid12-6 .inner_box button{
  background:#aaa;
  color:#fff;
  text-transform:uppercase;
  font-weight:bold;
  font-size:16px;
  border:none;
  padding:10px 30px;
}

In the above code you dummy image is used change it accordingly and see the result minor font size, color changes might be necessary

Share