How to make text transparent by hiding the border?

Question

I created a hero section where the content overlaps the border. Here's what it looks like:

I want to remove this gray area to make it transparent and make the background visible. But, as you can see, it overlaps at the border. Therefore, I do not want to see how the border makes its way. The content and image are dynamic, so the width can 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 greatly appreciated. Thanks in advance.

Answer 1

I made changes to css, the final css should look 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; } 

Have a look here DEMO - http://jsfiddle.net/922auw0w/

Answer 2

To remove a gray area change background:#8b8b8b; to background:transparent; .

As for overlapping, you must add

.border{ padding-top: 20px; }

change the 20px value to your custom.

Answer 3

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

I just "faked" the top border with the div.

 <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 upper bound with flex-box. Of course, if the text wraps your parts of the border, there will be a minimum length. But if your text is really short, it will expand to take up free space.

Below I have added / changed in 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 upper border sensitive to the text, I added a pseudo-element and I get a border with a shadow. We need to set the front lower limit to the width of the text.

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

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

Since the top border is now faked, I needed to use alternatives for the side 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>