Featured Image Block grid

By Kevin Ball

F6
#
How do I use This?

A block grid of featured images useful for showing things like destinations, real estate photos, or similar

HTML
<div class="featured-image-block-grid">
  <div class="featured-image-block-grid-header small-10 medium-8 large-7 columns text-center">
    <h2>Top Destinations</h2>
    <p>Start planning your travels here with the latest deals for popular destinations.</p>
  </div>
  <div class="row large-up-4 small-up-2">
    <div class="featured-image-block column">
     <a href="#">
        <img src="https://unsplash.it/600/440?image=899" />
        <p class="text-center featured-image-block-title">New York</p>
      </a>
    </div>
    
    <div class="featured-image-block column">
     <a href="#">
        <img src="https://unsplash.it/600/440?image=693" />
        <p class="text-center featured-image-block-title">San Francisco</p>
      </a>
    </div>
    
    <div class="featured-image-block column">
     <a href="#">
        <img src="https://unsplash.it/600/440?image=452" />
        <p class="text-center featured-image-block-title">Las Vegas</p>
      </a>
    </div>
    
    <div class="featured-image-block column">
     <a href="#">
        <img src="https://unsplash.it/600/440?image=792" />
        <p class="text-center featured-image-block-title">Sacramento</p>
      </a>
    </div>
    
    <div class="featured-image-block column">
     <a href="#">
        <img src="https://unsplash.it/600/440?image=667" />
        <p class="text-center featured-image-block-title">Los Angeles</p>
      </a>
    </div>
  
    <div class="featured-image-block column">
     <a href="#">
        <img src="https://unsplash.it/600/440?image=249" />
        <p class="text-center featured-image-block-title">Chicago</p>
      </a>
    </div>
    
    <div class="featured-image-block column">
     <a href="#">
        <img src="https://unsplash.it/600/440?image=382" />
        <p class="text-center featured-image-block-title">Boston</p>
      </a>
    </div>

    <div class="featured-image-block column">
     <a href="#">
        <img src="https://unsplash.it/600/440?image=1075" />
        <p class="text-center featured-image-block-title">Seattle</p>
      </a>
    </div>
  </div>
</div>


.featured-image-block-grid-header {
  margin-left: auto;
  margin-right: auto;
}

.featured-image-block {

  margin-bottom: 20px;
  
  .featured-image-block-title {
    font-weight: 600;
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1em;
    color: #404040;
  }
 
  a:hover {
    p {
      color: map-get($foundation-palette, primary);
    }
  }
}



.featured-image-block-grid-header {
  margin-left: auto;
  margin-right: auto;
}

.featured-image-block {
  margin-bottom: 20px;
}

.featured-image-block .featured-image-block-title {
  font-weight: 600;
  margin-top: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1em;
  color: #404040;
}

.featured-image-block a:hover p {
  color: #1779ba;
}

JS