News Image Gallery

By Harry Manchanda

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;
}

News Image Gallery

By Harry Manchanda

Article Row Section

Large Article Header

Sidelines Text Divider

News Image Gallery

By Harry Manchanda

Similar Building Blocks

Article Row Section

Large Article Header

Sidelines Text Divider