CodePen Embed - Open Image in Modal Window

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/js/lightbox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/css/lightbox.min.css">

<header class="section">

  <!-- container -->
  <div class="container">
    <h1>Website Title</h1>
    <p class="hide-small">Website slogan included here.</p>

    <nav class="site-nav">
      <ul class="group">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li class="hide-small"><a href="#">FAQs</a></li>
        <li class="hide-small"><a href="#">Links</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </nav>
  </div>
  <!-- /container -->

</header>

<div class="content-area group section">

  <!-- container -->
  <div class="container">

    <!-- row -->
    <div class="row">

      <!-- col -->
      <div class="col col-md-8 push-down-sm">

        <h2>Welcome to the page!</h2>

        <!-- thumbnails -->
        <div class="thumbnails group">
          <a href="https://learnwebcode.github.io/Web-Design-for-Beginners/strawberry.jpg" data-lightbox="gallery" data-title="This is a strawberry."><img src="https://learnwebcode.github.io/Web-Design-for-Beginners/strawberry-thumb.jpg" alt="Strawberry"></a>
          <a href="https://learnwebcode.github.io/Web-Design-for-Beginners/dock.jpg" data-lightbox="gallery"><img src="https://learnwebcode.github.io/Web-Design-for-Beginners/dock-thumb.jpg" alt="Dock"></a>
          <a href="https://learnwebcode.github.io/Web-Design-for-Beginners/bee.jpg" data-lightbox="gallery"><img src="https://learnwebcode.github.io/Web-Design-for-Beginners/bee-thumb.jpg" alt="Bee"></a>
          <a href="https://learnwebcode.github.io/Web-Design-for-Beginners/bear.jpg" data-lightbox="gallery"><img src="https://learnwebcode.github.io/Web-Design-for-Beginners/bear-thumb.jpg" alt="Bear"></a>
          <a href="https://learnwebcode.github.io/Web-Design-for-Beginners/squirrel.jpg" data-lightbox="gallery"><img src="https://learnwebcode.github.io/Web-Design-for-Beginners/squirrel-thumb.jpg" alt="Squirrel"></a>
          <a href="https://learnwebcode.github.io/Web-Design-for-Beginners/trees.jpg" data-lightbox="gallery"><img src="https://learnwebcode.github.io/Web-Design-for-Beginners/trees-thumb.jpg" alt="Trees"></a>
          <a href="https://learnwebcode.github.io/Web-Design-for-Beginners/water.jpg" data-lightbox="gallery"><img src="https://learnwebcode.github.io/Web-Design-for-Beginners/water-thumb.jpg" alt="Water"></a>
          <a href="https://learnwebcode.github.io/Web-Design-for-Beginners/duck.jpg" data-lightbox="gallery"><img src="https://learnwebcode.github.io/Web-Design-for-Beginners/duck-thumb.jpg" alt="Duck"></a>
        </div>
        <!-- /thumbnails -->

      </div>
      <!-- /col -->

      <!-- col -->
      <div class="col col-md-4 sidebar">
        <h3>Sidebar Heading</h3>
        <p>Sidebar Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem
          ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

        <p>Dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit
          amet, consectetur adipisicing elit, sed do eiusmod.</p>
      </div>
      <!-- /col -->

    </div>
    <!-- /row -->

  </div>
  <!-- /container -->

</div>

<footer>
  <p>&copy; 2014 - This is the footer.</p>
</footer>

html {
  background-color: #608699;
  line-height: 1.7;
}

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-top: 0;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
}

/* Main Column Typography */
.main-area h2 {
  font-size: 165%;
  font-weight: normal;
}

.section {
  padding-left: 40px;
  padding-right: 40px;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  overflow: hidden;
}

@media screen and (min-width: 1280px) {
  body {
    font-size: 16px;
  }

  .container {
    max-width: 1200px;
  }
}

@media screen and (max-width: 767px) {
  .section {
    padding-left: 20px;
    padding-right: 20px;
  }
}

header {
  padding-top: 20px;
  color: #fff;
  background-color: #405c71;
}

header h1 {
  margin: 0;
  font-weight: normal;
  font-size: 165%;
}

header p {
  font-size: 90%;
  margin: 0;
}

/* Site Navigation */
.site-nav {
  margin-top: 20px;
}

.site-nav ul {
  margin: 0;
  padding: 0;
}

.site-nav li {
  list-style: none;
  float: left;
  margin-right: 5px;
}

.site-nav a {
  display: block;
  color: #fff;
  padding: 10px 20px;
  background-color: #365267;
  transition-property: color, background-color;
  transition-duration: 2s;
}

.site-nav a:hover {
  background-color: #fff;
  color: #2c465a;
}

@media screen and (max-width: 1023px) {
  .site-nav li {
    width: 33.332%;
    margin-right: 0;
  }

  .site-nav a {
    padding: 15px 0;
    margin-right: 5px;
    margin-bottom: 5px;
    text-align: center;
  }
}

@media screen and (max-width: 767px) {
  .site-nav li {
    width: 50%;
  }
}

/* End Site Navigation */

.content-area {
  background-color: #fff;
  padding-bottom: 40px;
  padding-top: 40px;
}

@media screen and (max-width: 767px) {
  .content-area {
    padding-top: 20px;
  }
}

.main-area {
  width: 66%;
  float: left;
  padding-right: 40px;
  box-sizing: border-box;
}

.sidebar {
  color: #555;
  font-size: 85%;
}

.sidebar h3 {
  font-size: 138.5%;
  margin-bottom: 7px;
}

.info-box {
  background-color: #efeedb;
  border: 5px solid #e6e5c2;
  padding: 20px 40px 7px 40px;
  margin-bottom: 1em;
}

@media screen and (max-width: 767px) {
  .hide-small {
    display: none;
  }
}

/* Thumbnail Styles */
.thumbnails {
  margin-right: -15px;
}

.thumbnails a {
  float: left;
  width: 25%;
  box-sizing: border-box;
  padding-right: 15px;
  margin-bottom: 15px;
}

.thumbnails img {
  width: 100%;
  height: auto;
  display: block;
  transition: all 0.2s ease-in-out;
}

.thumbnails:hover img {
  opacity: 0.6;
  transform: scale(0.92);
}

.thumbnails:hover img:hover {
  opacity: 1;
  transform: scale(1) rotate(2deg);
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
}

@media screen and (max-width: 767px) {
  .thumbnails a {
    width: 50%;
  }
}

/* Grid */
.row {
  margin-right: -20px;
}

.col {
  width: 100%;
  float: left;
  padding-right: 20px;
  box-sizing: border-box;
}

.col-xs-11 {
  width: 91.662%;
}
.col-xs-10 {
  width: 83.332%;
}
.col-xs-9 {
  width: 75%;
}
.col-xs-8 {
  width: 66.662%;
}
.col-xs-7 {
  width: 58.331%;
}
.col-xs-6 {
  width: 50%;
}
.col-xs-5 {
  width: 41.662%;
}
.col-xs-4 {
  width: 33.332%;
}
.col-xs-3 {
  width: 25%;
}
.col-xs-2 {
  width: 16.662%;
}
.col-xs-1 {
  width: 8.332%;
}

@media screen and (min-width: 768px) {
  .row {
    margin-right: -40px;
  }

  .col {
    padding-right: 40px;
  }

  .col-sm-11 {
    width: 91.662%;
  }
  .col-sm-10 {
    width: 83.332%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.662%;
  }
  .col-sm-7 {
    width: 58.331%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.662%;
  }
  .col-sm-4 {
    width: 33.332%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.662%;
  }
  .col-sm-1 {
    width: 8.332%;
  }
}

@media screen and (min-width: 1024px) {
  .col-md-11 {
    width: 91.662%;
  }
  .col-md-10 {
    width: 83.332%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-8 {
    width: 66.662%;
  }
  .col-md-7 {
    width: 58.331%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-5 {
    width: 41.662%;
  }
  .col-md-4 {
    width: 33.332%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-2 {
    width: 16.662%;
  }
  .col-md-1 {
    width: 8.332%;
  }
}

@media screen and (min-width: 1280px) {
  .col-lg-11 {
    width: 91.662%;
  }
  .col-lg-10 {
    width: 83.332%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-8 {
    width: 66.662%;
  }
  .col-lg-7 {
    width: 58.331%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-5 {
    width: 41.662%;
  }
  .col-lg-4 {
    width: 33.332%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-2 {
    width: 16.662%;
  }
  .col-lg-1 {
    width: 8.332%;
  }
}

@media screen and (max-width: 1023px) {
  .push-down-sm {
    margin-bottom: 30px;
  }
}

@media screen and (max-width: 767px) {
  .push-down-sm {
    margin-bottom: 15px;
  }
}

footer {
  text-align: center;
  font-size: 85%;
  color: #fff;
  padding-bottom: 20px;
  padding-top: 20px;
}

.row:before,
.row:after,
.group:before,
.group:after {
  content: "";
  display: table;
}

.row:after,
.group:after {
  clear: both;
}

.row,
.group {
  zoom: 1;
}

This Pen is owned by Brad / LearnWebCode on CodePen.

See more by @learnwebcode on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.