How to make text transparent by hiding the border?

Question

I've made a hero section where the content overlaps the border. Here's how it looks like :

I want to remove that grey area to make it transparent and make the background visible. But as you can see its overlapped in a border. So I don't want to see the border as strike through. The content and the image is dynamic so the width may change.

Live Demo : On Codepen

HTML

        <div class="wrap">
    <div class="border">
        <h1 class="hero-title">We make your website beautiyul & usable </h1>
  <span class="attr">— Citation, ABC Inc</span>
    </div>
        </div>  

CSS

@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900);

body {
  background: url('https://source.unsplash.com/category/nature') no-repeat center center #333;
  color:#FFF;
  font-family: "Playfair Display", Georgia, serif;
  background-size:cover;
}

.wrap {
  max-width:1200px;
  margin:0 auto;
  padding:130px 20px;
}

.border {
  border:solid 10px #FFF;
  text-align:center;
}

.attr {
  position:relative;
  top:-45px;
  font-size:20px;
  display:block;
}

.hero-title {
  font-weight:700;
  font-size:90px;
  text-align:center;
  margin:0 50px;
  padding:0;
  position:relative;
  top:-75px;
  background:#8b8b8b;
  display:inline-block;
}

Live Demo : On Codepen

Looking for a CSS only solution. Any help would be appreciated. Thanks in advance.

Answer 1

The i have made the changes in the css , the final css should be like

@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400, 700, 900);
 body {
    background: url('https://source.unsplash.com/category/nature') no-repeat center center #333;
    color:#FFF;
    font-family:"Playfair Display", Georgia, serif;
    background-size:cover;
}
.wrap {
    max-width:1200px;
    margin:0 auto;
    padding:130px 20px;
}
.border {
    border:solid 10px #FFF;
    text-align:center;
    position:relative;
}
.attr {
    top:-45px;
    font-size:20px;
    display:block;
}
.hero-title {
    font-weight:700;
    font-size:90px;
    text-align:center;
    margin:0 50px;
    padding:0;
    top:-75px;
    display:inline-block;
}

Check out the DEMO here - http://jsfiddle.net/922auw0w/