News Image Gallery

By Harry Manchanda

F6
#
article news blog gallery image social icons image slider carousel orbit
How do I use This?

News Image Gallery/Slider that includes a short description and social links.

HTML
<div class="news-image-gallery-container">
  <div class="row">
    <div class="small-12 medium-12 large-8 columns">
      <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">
        <ul class="orbit-container">
          <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
          <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
          <li class="is-active orbit-slide">
            <img class="orbit-image" src="https://i.imgur.com/4K3hXoZ.jpg" alt="Space">
            <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
          </li>
          <li class="orbit-slide">
            <img class="orbit-image" src="https://i.imgur.com/V7zk0Y3.jpg" alt="Space">
            <figcaption class="orbit-caption">Lets Rocket!</figcaption>
          </li>
          <li class="orbit-slide">
            <img class="orbit-image" src="https://i.imgur.com/vivEvd0.jpg" alt="Space">
            <figcaption class="orbit-caption">Encapsulating</figcaption>
          </li>
          <li class="orbit-slide">
            <img class="orbit-image" src="https://i.imgur.com/VKdPzTp.jpg" alt="Space">
            <figcaption class="orbit-caption">Outta This World</figcaption>
          </li>
        </ul>
        <nav class="orbit-bullets">
          <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
          <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
          <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
          <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
        </nav>
      </div>
    </div>
    <div class="small-12 medium-12 large-4 columns">
      <div class="rounded-social-buttons">
        <a class="social-button facebook" href="#"></a>
        <a class="social-button twitter" href="#"></a>
        <a class="social-button linkedin" href="#"></a>
        <a class="social-button google-plus" href="#"></a>
      </div>
      <div class="clearfix"></div>
      <h4 class="news-image-gallery-title">Extraterrestrial culture: How we express ourselves through space exploration</h4>
      <p>
        This is not a new thing. Terrestrial cultures have (always) had a degree of extraterrestrial-ity in them. Cultural astronomers and archeoastronomers...
        <a href="#" class="read-more">
          Read More
        </a>
      </p>
    </div>
  </div>
</div>


$social-button-size: 2.5rem;
$social-button-border-width: .125rem;
$social-button-font-size: 1.25rem;
$social-button-line-height: 1.8em;
$social-button-border-radius: 1.6875rem;
$social-button-transition: 0.5s ease all;
$social-button-margin: .25rem;

// Source: https://designpieces.com/2012/12/social-media-colours-hex-and-rgb/
$social-brand-facebook: #3b5998;
$social-brand-twitter: #55acee;
$social-brand-linkedin: #007bb5;
$social-brand-google-plus: #dd4b39;

@mixin social-button($brand-color, $brand-icon) {
  background: $brand-color;

  &:before {
    font-family: "FontAwesome";
    content: $brand-icon;
  }
  &:hover,
  &:focus {
    color: $brand-color;
    background: $white;
    border-color: $brand-color;
  }
}

.news-image-gallery-container {
  background-color: $white;
  padding: 2rem 1.5rem 1rem;
  
  .rounded-social-buttons {
    text-align: left;

    .social-button {
      display: inline-block;
      position: relative;
      cursor: pointer;
      width: $social-button-size;
      height: $social-button-size;
      border: $social-button-border-width solid transparent;
      padding: 0;
      text-decoration: none;
      text-align: center;
      color: $white;
      font-size: $social-button-font-size;
      font-weight: normal;
      line-height: $social-button-line-height;
      border-radius: $social-button-border-radius;
      transition: $social-button-transition;
      margin-right: $social-button-margin;
      margin-bottom: $social-button-margin;

      &:hover,
      &:focus {
        transform: rotate(360deg);
      }

      &.facebook {
        @include social-button($social-brand-facebook, "\f09a")
      }
      &.twitter {
        @include social-button($social-brand-twitter, "\f099")
      }
      &.linkedin {
        @include social-button($social-brand-linkedin, "\f0e1")
      }
      &.google-plus {
        @include social-button($social-brand-google-plus, "\f0d5")
      }
    }
  }

  .news-image-gallery-title {
    margin-top: .5rem;
  }

  .read-more {
    color: $dark-gray;
  }
}


@charset "UTF-8";

.news-image-gallery-container {
  background-color: #fefefe;
  padding: 2rem 1.5rem 1rem;
}

.news-image-gallery-container .rounded-social-buttons {
  text-align: left;
}

.news-image-gallery-container .rounded-social-buttons .social-button {
  display: inline-block;
  position: relative;
  cursor: pointer;
  width: 2.5rem;
  height: 2.5rem;
  border: 0.125rem solid transparent;
  padding: 0;
  text-decoration: none;
  text-align: center;
  color: #fefefe;
  font-size: 1.25rem;
  font-weight: normal;
  line-height: 1.8em;
  border-radius: 1.6875rem;
  transition: 0.5s ease all;
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;
}

.news-image-gallery-container .rounded-social-buttons .social-button:hover, .news-image-gallery-container .rounded-social-buttons .social-button:focus {
  -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

.news-image-gallery-container .rounded-social-buttons .social-button.facebook {
  background: #3b5998;
}

.news-image-gallery-container .rounded-social-buttons .social-button.facebook:before {
  font-family: "FontAwesome";
  content: "";
}

.news-image-gallery-container .rounded-social-buttons .social-button.facebook:hover, .news-image-gallery-container .rounded-social-buttons .social-button.facebook:focus {
  color: #3b5998;
  background: #fefefe;
  border-color: #3b5998;
}

.news-image-gallery-container .rounded-social-buttons .social-button.twitter {
  background: #55acee;
}

.news-image-gallery-container .rounded-social-buttons .social-button.twitter:before {
  font-family: "FontAwesome";
  content: "";
}

.news-image-gallery-container .rounded-social-buttons .social-button.twitter:hover, .news-image-gallery-container .rounded-social-buttons .social-button.twitter:focus {
  color: #55acee;
  background: #fefefe;
  border-color: #55acee;
}

.news-image-gallery-container .rounded-social-buttons .social-button.linkedin {
  background: #007bb5;
}

.news-image-gallery-container .rounded-social-buttons .social-button.linkedin:before {
  font-family: "FontAwesome";
  content: "";
}

.news-image-gallery-container .rounded-social-buttons .social-button.linkedin:hover, .news-image-gallery-container .rounded-social-buttons .social-button.linkedin:focus {
  color: #007bb5;
  background: #fefefe;
  border-color: #007bb5;
}

.news-image-gallery-container .rounded-social-buttons .social-button.google-plus {
  background: #dd4b39;
}

.news-image-gallery-container .rounded-social-buttons .social-button.google-plus:before {
  font-family: "FontAwesome";
  content: "";
}

.news-image-gallery-container .rounded-social-buttons .social-button.google-plus:hover, .news-image-gallery-container .rounded-social-buttons .social-button.google-plus:focus {
  color: #dd4b39;
  background: #fefefe;
  border-color: #dd4b39;
}

.news-image-gallery-container .news-image-gallery-title {
  margin-top: .5rem;
}

.news-image-gallery-container .read-more {
  color: #8a8a8a;
}
JS

Similar Building Blocks

media

Article Row Section

F6
by Rafi
media

Large Article Header

F6
by Christine Siu
media

Sidelines Text Divider

F6
by Rafi