Apartment | preview

by Kirubel Girma

HTML

<div class="wrp">

  <div class="pre-cont">
    <img src="http://cdn.homedit.com/wp-content/uploads/2017/03/NA-House-lounge-area-800x534.jpg" alt="" class="pre-img ">
    <div class="pre-title">POSTED IN APARTMENTS | BY SIMONA GANEA, ON MARCH 7, 2017</div>
    <div class="pre-sub">Old Apartment Remodeled Using A Monochromatic Approach</div>

    <button class="z" name="subject" type="" value="View in 360Bot">View in 3D</button>
  </div>


  <div class="pre-cont">
    <img src="http://cdn.homedit.com/wp-content/uploads/2017/03/NA-House-lounge-area-800x534.jpg" alt="" class="pre-img ">
    <div class="pre-title">POSTED IN APARTMENTS | BY SIMONA GANEA, ON MARCH 7, 2017</div>
    <div class="pre-sub">Old Apartment Remodeled Using A Monochromatic Approach</div>

    <button class="z" name="subject" type="" value="View in 360Bot"></button>
  </div>

  <div class="pre-cont">
    <img src="http://cdn.homedit.com/wp-content/uploads/2017/03/NA-House-lounge-area-800x534.jpg" alt="" class="pre-img ">
    <div class="pre-title">POSTED IN APARTMENTS | BY SIMONA GANEA, ON MARCH 7, 2017</div>
    <div class="pre-sub">Old Apartment Remodeled Using A Monochromatic Approach</div>

    <button class="z" name="subject" type="" value="View in 360Bot"></button>
  </div>

  <div class="pre-cont">
    <img src="http://cdn.homedit.com/wp-content/uploads/2017/03/NA-House-lounge-area-800x534.jpg" alt="" class="pre-img ">
    <div class="pre-title">POSTED IN APARTMENTS | BY SIMONA GANEA, ON MARCH 7, 2017</div>
    <div class="pre-sub">Old Apartment Remodeled Using A Monochromatic Approach</div>

    <button class="z" name="subject" type=""></button>
  </div>

</div>

CSS

* {
  font-family: arial;
}

.pre-cont {
  float: left;
  position: relative;
  height: 18.563em;
  width: 33em;
}

.pre-title {
  color: white;
  background: rgba(139, 195, 74, 0.89);
  font-size: 1.2em;
  position: absolute;
  top: .5em;
  left: .5em;
  right: .5em;
  padding: .2em;
}

.pre-sub {
  background: rgba(255, 255, 255, 0.4);
  font-size: .97em;
  position: absolute;
  top: 4em;
  left: .6em;
  right: .6em;
  padding: .2em;
}

.pre-img {
  height: 18.563em;
  width: 33em;
}

.z {
  height: 3em;
  width: 6em;
  position: absolute;
  top: 18.6em;
  left: .6em;
  border: none;
  outline: none;
  padding: .5em .8em .5em .8em;
}