.container-fluid
.col-lg-6.col-lg-offset-0.col-md-6.col-md-offset-0.col-sm-10.col-sm-offset-1.col-xs-12
figure
.media(style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/584938/bg_15.png)")
figcaption
svg(viewBox="0 0 200 200" version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg")
defs
mask(id="mask" x="0" y="0" width="100%" height="100%")
//- alpha rectangle
rect(id="alpha" x="0" y="0" width="100%" height="100%")
//- All text that you want
text(class="title" dx="50%" dy="2.5em") ENJOY
text(class="title" dx="50%" dy="3.5em") EVERY
text(class="title" dx="50%" dy="4.5em") MOMENT
rect(id="base" x="0" y="0" width="100%" height="100%")
.body
p Enamel pin selvage health goth edison bulb, venmo glossier tattooed hella butcher cred iPhone.
a(href="#")
.col-lg-6.col-md-6.hidden-sm.hidden-xs
figure
.media(style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/584938/bg_5.png)")
figcaption
svg(viewBox="0 0 200 200" version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg")
defs
mask(id="mask" x="0" y="0" width="100%" height="100%")
//- alpha rectangle
rect(id="alpha" x="0" y="0" width="100%" height="100%")
//- All text that you want
text(class="title" dx="50%" dy="2.5em") ENJOY
text(class="title" dx="50%" dy="3.5em") EVERY
text(class="title" dx="50%" dy="4.5em") MOMENT
rect(id="base" x="0" y="0" width="100%" height="100%")
.body
p Enamel pin selvage health goth edison bulb, venmo glossier tattooed hella butcher cred iPhone. Plaid skateboard man braid wayfarers.
a(href="#")
View Compiled
@import url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/584938/library.less");
@import url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/584938/variables.less");
@body: #252830;
body {
background-color: @body;
color: white;
font-family: "Lato";
}
.container-fluid {
.center;
width: 100%;
}
.media {
background-position: center;
background-size: cover;
height: 100%;
position: absolute;
transition: all 0.3s ease;
width: 100%;
}
figure {
height: 370px;
overflow: hidden;
position: relative;
a {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 3;
}
&:hover .media {
transform: scale(1.25);
}
}
figcaption {
color: @body;
height: ~"calc(100% - 30px)";
margin: 15px;
left: 0;
position: absolute;
top: 0;
width: 250px;
}
.body {
background-color: white;
bottom: 0;
padding: 15px;
position: absolute;
width: 100%;
}
svg {
height: inherit;
width: 100%;
text {
text-anchor: middle;
}
#alpha {
fill: white;
}
.title {
font-size: 28px;
font-family: "Montserrat";
letter-spacing: 5px;
}
#base {
fill: white;
mask: url(#mask);
mask: url(#mask);
}
}
View Compiled