.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;
    -webkit-mask: url(#mask);
    mask: url(#mask);
  }
}
View Compiled

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/584938/icomoon.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js