<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="blurlayer" width="110%" height="100%">
<feColorMatrix
type="matrix"
values=".7 0 0 0 0
0 .7 0 0 0
0 0 .7 0 0
0 0 0 1 0 " />
<feGaussianBlur stdDeviation="4" result="blur"/>
<feImage id="feimage" xlink:href="data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMTAyNCIgaGVpZ2h0PSIzMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogPGc+DQogIDx0aXRsZT5iYWNrZ3JvdW5kPC90aXRsZT4NCiAgPHJlY3QgZmlsbD0ibm9uZSIgaWQ9ImNhbnZhc19iYWNrZ3JvdW5kIiBoZWlnaHQ9IjMwMiIgd2lkdGg9IjEwMjYiIHk9Ii0xIiB4PSItMSIvPg0KIDwvZz4NCg0KIDxnPg0KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+DQogIDxyZWN0IGlkPSJzdmdfMSIgaGVpZ2h0PSIxMzMiIHdpZHRoPSIxMDI0IiB5PSI4NC41IiB4PSIwIiBmaWxsLW9wYWNpdHk9Im51bGwiIHN0cm9rZS1vcGFjaXR5PSJudWxsIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlPSJudWxsIiBmaWxsPSIjMDAwMDAwIi8+DQogPC9nPg0KPC9zdmc+" x="0%" y="0" height="300px" result="mask" preserveAspectRatio="none"/>
<feComposite in2="mask" in="blur" operator="in" result="comp" />
<feMerge result="merge">
<feMergeNode in="SourceGraphic" />
<feMergeNode in="comp" />
</feMerge>
</filter>
</defs>
</svg>
<section class="banner">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image filter="url(#blurlayer)" x="0" y="0" width="100%" height="300px" xlink:href="https://www.sitepoint.com/themes/ecommerce/wp-content/uploads/sites/4/ecom-banner-2-1_1020x304_acf_cropped-1.jpg"/>
</svg>
<div class="textcontainer">
<h1 class="">The Cloud Collection 2017</h1>
<p class="byline ">Beautiful. Elegant. Homewares.</p>
</div>
</section>
html {
height: 100%;
}
body {
background: silver;
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
}
svg {
display: block;
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 100%;
}
.banner {
height: 280px;
margin: 2em 5% 0;
text-align: center;
font-family: 'Raleway', sans-serif;
font-weight: 300;
overflow: hidden;
position: relative;
}
.textcontainer {
background: rgba(0, 0, 25, 0);
font-size: 3em;
padding: .5em 0;
position: relative;
z-index: 1000;
line-height: .5em;
letter-spacing: 2px;
color: rgba(255, 255, 255, 1);
top: 1.5em;
width: 100%;
}
h1 {
font-size: 1em;
line-height: 1.5em;
font-weight: 400;
margin: 0;
z-index: 100;
text-shadow: 0 0 8px rgba(0, 0, 0, .3);
}
.byline {
font-size: .3em;
line-height: 1.5em;
font-family: Merriweather;
margin: .75em;
z-index: 100;
text-shadow: 0 0 8px rgba(0, 0, 0, .3);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.