3-Up Image Block

By Laurel Beyers

How do I use This?

A simple and useful three image block that stacks on mobile.

HTML

<!-- Use this stylesheet for typography in head of your HTML doc if you want :) -->

<link href="https://fonts.googleapis.com/css?family=Sanchez" rel="stylesheet">

<!-- Start of body below -->

  <div class="row main-links">
    <div class="small-12 medium-4 columns">
      <div class="title-box">
        <h4 class="title-box-title">Image 1</h4>
      </div>
      <img src="https://placehold.it/400x300">
    </div>
    <div class="small-12 medium-4 columns">
      <div class="title-box">
        <h4 class="title-box-title">Image 2</h4>
      </div>
      <img src="https://placehold.it/400x300">
    </div>
    <div class="small-12 medium-4 columns">
      <div class="title-box">
        <h4 class="title-box-title">Image 3</h4>
      </div>
      <img src="https://placehold.it/400x300">
    </div>
  </div>

$gray: #808080;
$white: #fff;
$highlight: #4ec6cd;
$nav-text-color: $gray;
$header-font:'Sanchez', serif;
$vert-seperate: 4rem;


  .main-links {
    padding-top: $vert-seperate;
    margin-bottom: $vert-seperate;

    h4 {
      font-family: $header-font;

      @media screen and (max-width: 39.9375em) {
        font-size: 1.5rem;
      }
    }

    .columns {
      position: relative;
    }

    .title-box {
      text-align: center;
      background: white;
      color: $highlight;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      padding: .2rem 1rem;

      .title-box-title {
        margin-bottom: 0;

       &:hover {
         color: darken($highlight, 25%);
         transition: color .3s ease-in;
       }
      }
    }
      @media screen and (max-width: 39.9375em) {
       img {
         height: 250px;
         display: block;
         margin: 2rem auto;
       }
    }
  }

.main-links {
  padding-top: 4rem;
  margin-bottom: 4rem;
}

.main-links h4 {
  font-family: "Sanchez", serif;
}

@media screen and (max-width: 39.9375em) {
  .main-links h4 {
    font-size: 1.5rem;
  }
}

.main-links .columns {
  position: relative;
}

.main-links .title-box {
  text-align: center;
  background: white;
  color: #4ec6cd;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  padding: .2rem 1rem;
}

.main-links .title-box .title-box-title {
  margin-bottom: 0;
}

.main-links .title-box .title-box-title:hover {
  color: #227479;
  transition: color .3s ease-in;
}

@media screen and (max-width: 39.9375em) {
  .main-links img {
    height: 250px;
    display: block;
    margin: 2rem auto;
  }
}

3-Up Image Block

By Laurel Beyers

Featured Articles with Side Links

Large Article Header

About the Author

3-Up Image Block

By Laurel Beyers

Similar Building Blocks

Featured Articles with Side Links

Large Article Header

About the Author