HTML
<main>
<div class="content">
<div class="content-background">
<div class="content-backgroud__wrapper">
<div class="content-backgroud__inner"></div>
<div class="content-backgroud__overlay"></div>
</div>
</div>
<div class="content-info">
<h3>A heading</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eum optio exercitationem quos distinctio enim placeat quidem deleniti atque sequi id nihil corrupti, voluptates, asperiores adipisci! Quibusdam maxime rem sunt veniam.</p>
</div>
</div>
<div class="content">
<div class="content-background">
<div class="content-backgroud__wrapper">
<div class="content-backgroud__image"></div>
</div>
</div>
<div class="content-info">
<h3>A heading</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eum optio exercitationem quos distinctio enim placeat quidem deleniti atque sequi id nihil corrupti, voluptates, asperiores adipisci! Quibusdam maxime rem sunt veniam.</p>
</div>
</div>
</main>
SCSS
/**
* index.scss
* - Add any styles you want here!
*/
body {
background: #f5f5f5;
font-family: Helvetica,sans-serif,arial;
float: left;
}
.content {
background-color: lightgray;
position: relative;
float: left;
min-height: 475px;
.content-background {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
border-radius: inherit;
background-clip: padding-box;
.content-backgroud__wrapper {
backface-visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: inherit;
background-clip: padding-box;
.content-backgroud__inner, .content-backgroud__image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image: linear-gradient(to right,#1b73a7 0,#5ebcf4 100%);
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
background-size: cover;
}
.content-backgroud__image {
&:before {
content: "";
display: block;
background-color: transparent;
width: 100%;
height: 100%;
background: rgba(25,25,25,.6);
background: -webkit-gradient(linear,left top,right top,from(rgba(25,25,25,.6)),to(rgba(25,25,25,0)));
background: linear-gradient(to right,rgba(25,25,25,.6) 0,rgba(25,25,25,0) 100%);
}
}
.content-backgroud__overlay {
background-color: #000000;
position: absolute;
width: 100%;
height: 100%;
top: 0px;
opacity: 0.2;
transition: opacity 0.2s;
}
}
}
.content-info {
position: relative;
}
}
