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/

Answer 2

To remove the grey area change background:#8b8b8b; to background:transparent; .

As it comes for the overlapping you should probably add

.border{ padding-top: 20px; }

changing the value 20px to your custom one.

Answer 3

http://codepen.io/anon/pen/MazGwm

I just "faked" top border with divs.

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



.border-top{
   width:50px;
   height: 10px;
   background-color: #fff;
   float:left;
}
.border-top.right{
  float:right;
}

Answer 4

You can get a responsive top border with flex-boxes. Of course, if the text wraps your pieces of the border will be the minimum length. But if your text is really short they will expand to take up the available space.

Below is what I've added/changed in the css. See it in action on codepen.

.wrap{
    padding: 130px 0; /* We will put a min-width on our lines */
}
.hero-title{
    display: flex;
    margin: -80px 0 0; /* margin + padding */
    position: static; /* We don't need relative and a top -xx */
    background: transparent;
}
.hero-title::before, .hero-title::after{
    display: block;
    content: "";
    height: 0;
    min-width: 60px;
    flex: 1;
    border-top: 10px solid red; /* to see what we're drawing here */
    margin-top: 75px; /* how much the text sticks out on top */
}
.hero-title::before{
    margin-right: 10px; /* We want to prevert our borders from touching the text */
}
.hero-title::after{
    margin-left: 10px;
}
.border{
    border-top-width: 0px;
    padding-top: 5px; /* anything > 0px */
}
.attr{
    position: static; /* We don't need relative and a top -xx */
    margin: 25px;
}

Answer 5

To make the top border responsive with the text, I have added a pseudo element, and get the border with a shadow. We need to set before-hand a lower limit to the text width.

And, if this width is too low, we may need to play with multiple shadows.

In my example, I have set 4 shadows, but you can set more if needed.

Since the top border is now faked, I needed to use alternatives fot the lateral border (backgrounds)

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:70px 20px;
}

.border {
  margin-top: 0px;
  border-bottom:solid 10px white;
  text-align:center;
  overflow: hidden;
  background-image: linear-gradient(white, white), linear-gradient(white, white);
  background-size: 10px calc(100% - 70px), 10px calc(100% - 70px);
  background-position: left bottom, right bottom;
  background-repeat: no-repeat; 

}

.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: 0px;
  display:inline-block;
}

.hero-title:after {
  content: "";
  position: absolute;
  height: 10px;
  width: 100%;
  background-color: transparent;
  left: 0px;
  top: 70px;
    box-shadow: 200px 0px 0px 0px white, 400px 0px 0px 0px white, -200px 0px 0px 0px white, -400px 0px 0px 0px white;
}

<div class="wrap">
    <div class="border">
        <h1 class="hero-title">We make beatifull webs</h1>
    </div>
</div>