12+ CSS Gallery Examples

This post contains a total of 12+ CSS Gallery Examples with Source Code. All these Galleries are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Gallery Examples

1. By Olivia Ng

Made by Olivia Ng. Animated Photo Gallery. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Fira+Sans:800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css'>
<style>
body {
  background: #222;
  font-family: "Fira Sans", sans-serif;
  padding-right: 2rem;
}

* {
  box-sizing: border-box;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  overflow: hidden;
  max-width: 1300px;
  margin: auto;
}
.gallery__strip {
  min-height: 100vh;
}
.gallery__strip__wrapper {
  flex: 0 0 100%;
  justify-content: flex-end;
  background: #222;
  border-right: 2px solid #333;
  position: relative;
}

@media (min-width: 500px) {
  .gallery__strip__wrapper {
    flex: 0 0 50%;
  }
}
@media (min-width: 950px) {
  .gallery {
    height: 100vh;
  }
  .gallery__strip.one {
    animation: 60s move-it ease alternate infinite 5s;
    transform: translateY(2%);
  }
  .gallery__strip.three {
    animation: 70s move-it ease alternate infinite 6s;
    transform: translateY(2%);
  }
  .gallery__strip.two {
    animation: 58s move-it-2 ease alternate infinite 5s;
    transform: translateY(-50%);
  }
  .gallery__strip.four {
    animation: 65s move-it-2 ease alternate infinite 5.5s;
    transform: translateY(-50%);
  }
  .gallery__strip:hover {
    animation-play-state: paused;
  }
  .gallery__strip__wrapper {
    flex: 0 0 25%;
  }
}
.photo {
  position: relative;
  text-align: right;
  padding-bottom: 3rem;
}
.photo__image img {
  width: 90%;
  transform: translateX(30%);
  transition: 1s cubic-bezier(0.19, 1, 0.22, 1) 0.2s;
}
.photo__name {
  text-transform: uppercase;
  font-size: 40px;
  letter-spacing: 2px;
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
  margin-top: -25px;
  transition: 0.4s ease-in-out 0.4s;
  position: relative;
  width: 100%;
}
.photo:hover .photo__image img {
  transform: translateX(0%);
}
.photo:hover .photo__name {
  color: #fff;
}

@keyframes move-it {
  0%, 90%, 100% {
    transform: translateY(2%);
  }
  45% {
    transform: translateY(-50%);
  }
}
@keyframes move-it-2 {
  0%, 90%, 100% {
    transform: translateY(-50%);
  }
  45% {
    transform: translateY(5%);
  }
}
</style>
</head>
<body>
  <div class="gallery">
  <div class="gallery__strip__wrapper">
    <div class="gallery__strip one">
      <div class="photo">
        <div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-kyoto.jpeg"/></div>
        <div class="photo__name">Kyoto</div>
      </div>
      <div class="photo">
        <div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-austria.jpeg"/></div>
        <div class="photo__name">Halstatt</div>
      </div>
      <div class="photo">
        <div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-peru.jpeg"/></div>
        <div class="photo__name">Peru</div>
      </div>
      <div class="photo">
        <div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-rio.jpeg"/></div>
        <div class="photo__name">Rio</div>
      </div>
    </div>
  </div>
  <div class="gallery__strip__wrapper">
    <div class="gallery__strip two">
      <div class="photo">
        <div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-italy.jpeg"/></div>
        <div class="photo__name">Italy</div>
      </div>
      <div class="photo">
        <div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-osaka.jpeg"/></div>
        <div class="photo__name">Osaka</div>
      </div>
      <div class="photo">
        <div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-bali.jpeg"/></div>
        <div class="photo__name">Bali</div>
      </div>
      <div class="photo">
        <div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-paris2.jpg"/></div>
        <div class="photo__name">Paris</div>
      </div>
    </div>
  </div>
  <div class="gallery__strip__wrapper">
    <div class="gallery__strip three">
      <div class="photo">
        <div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-cusco.jpeg"/></div>
        <div class="photo__name">Cusco</div>
      </div>
      <div class="photo">
        <div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-rome.jpeg"/></div>
        <div class="photo__name">Rome</div>
      </div>
      <div class="photo">
        <div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-paris.jpeg"/></div>
        <div class="photo__name">Paris</div>
      </div>
      <div class="photo">
        <div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-bali2.jpeg"/></div>
        <div class="photo__name">Bali</div>
      </div>
    </div>
  </div>
  <div class="gallery__strip__wrapper">
    <div class="gallery__strip four">
      <div class="photo">
        <div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-milan.jpeg"/></div>
        <div class="photo__name">Milan</div>
      </div>
      <div class="photo">
        <div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-budapest.jpg"/></div>
        <div class="photo__name">Budapest</div>
      </div>
      <div class="photo">
        <div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-vienna.jpg"/></div>
        <div class="photo__name">Vienna</div>
      </div>
      <div class="photo">
        <div class="photo__image"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gg-mexico.jpg"/></div>
        <div class="photo__name">Mexico</div>
      </div>
    </div>
  </div>
</div>
<!-- Optional for Scroll Animation -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
</body>
</html>

2. By Sasha

Made by Sasha. CSS Gallery with Hover Effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url("https://fonts.googleapis.com/css?family=Inconsolata|Source+Sans+Pro:200,300,400,600");
body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #E0E0E0;
  overflow: hidden;
}

h1 {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 22px;
  color: #151E3F;
  font-weight: 300;
  letter-spacing: 2px;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper > * {
  margin: 5px;
}

.media {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.media img {
  max-width: 100%;
  height: auto;
}

.layer {
  opacity: 0;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10px;
  height: 90%;
  background: #FFF;
  color: #151E3F;
  transition: all 0.9s ease;
}
.layer p {
  transition: all 0.9s ease;
  transform: scale(0.1);
}

p {
  font-family: "Inconsolata", monospace;
  text-align: center;
  font-size: 15px;
  letter-spacing: 1px;
}

.media:hover .layer {
  opacity: 0.8;
  width: 90%;
  transition: all 0.5s ease;
}
.media:hover .layer p {
  transform: scale(1);
  transition: all 0.9s ease;
}

@media (max-width: 800px) {
  body {
    transform: scale(0.6);
  }
}
@media (max-width: 600px) {
  .wrapper {
    display: block;
  }
  .wrapper > * {
    margin: 10px;
  }
}
</style>
</head>
<body>
  <h1>Gallery with hover effect</h1>
<div class="wrapper">
<div class="media">
<div class="layer">
    <p>+ Paul Gilmore</p>
  </div>
<img src="https://images.unsplash.com/photo-1431818563807-927945852ab6?dpr=1&auto=format&fit=crop&w=1199&h=899&q=80&cs=tinysrgb&crop=" alt="" />
</div>
 <div class="media">
<div class="layer">
    <p>+ M. O' Neil</p>
  </div>
<img src="https://images.unsplash.com/photo-1443397646383-16272048780e?dpr=1&auto=format&fit=crop&w=1199&h=899&q=80&cs=tinysrgb&crop=" alt="" />
</div>
   <div class="media">
<div class="layer">
    <p>+ N. Mehta</p>
  </div>
<img src="https://images.unsplash.com/photo-1442965416224-f6a7eca980fa?dpr=1&auto=format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=" alt="" />
</div>
</div>
</body>
</html>

3. By Juan MartΓ­n GarcΓ­a

Made by Juan MartΓ­n GarcΓ­a. Full Width Image Gallery. Source

CSS Gallery by Juan Martin Garcia
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> 
<style>
main.gallery {
  padding: 2rem;
}

.gallery > h1 {
  font-size: 3rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin-bottom: 1rem;
  color: #333333;
  font-weight: 100;
}

.gallery > .gallery__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  grid-template-rows: repeat(6, 200px);
  grid-gap: 1rem;
  grid-auto-flow: dense;
}

.gallery > .gallery__list > li:nth-child(4n) {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery > .gallery__list > li:nth-child(8n) {
  grid-column: span 3;
  grid-row: span 3;
}

.gallery > .gallery__list > li > figure {
  height: 100%;
}

.gallery > .gallery__list > li > figure > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
</head>
<body>
  <main class="gallery">
  <h1>A peek at Space πŸ‘€</h1>
  <ul class="gallery__list">
    <li>
      <figure>
        <img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22942_hires.jpg" alt="Juno's Latest Flyby of Jupiter Captures Two Massive Storms">
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA23021_hires.jpg" alt="A first look at dunes">
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA23002_hires.jpg" alt="K2-138 6 Planets Artwork (Artist's Illustration) ">
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA21212_hires.jpg" alt="Small Prominences">
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22983_hires.jpg" alt="Ezinu Crater">
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22990_hires.jpg" alt="Polar Ice">
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22963_hires.jpg" alt="Jupiter">
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22918_hires.jpg" alt="Star Gaia 17pbi Seen by Spitzer">
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22900_hires.jpg" alt="Another Cloudy Day">
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22941_hires.jpg" alt="South Equatorial Belt Brown Barge Close-up">
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22936_hires.jpg" alt="Earth-based Observation of Jupiter">
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22937_hires.jpg" alt="Jupiter's South Tropical Disturbance">
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22933_hires.jpg" alt="Jupiter's Southern Circumpolar Cyclones">
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22906_hires.jpg" alt=" Juno Flyby Movie ">
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22895_hires.jpg" alt="Swiss Cheese on a Red Planet">
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA21211_hires.jpg" alt="Solar Active Region's Cameo Appearance">
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22914_hires.jpg" alt="Bow Shock Around Young Star">
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22695_hires.jpg" alt="Jupiter's North Equatorial Belt">
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22770_hires.jpg" alt="Titan Mosaic: The Surface Under the Haze">
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA18144_hires.jpg" alt="Reappearing Coronal Hole">
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22820_hires.jpg" alt="NASA's ASTER Captures Lava Flow, Ash from Guatemala Volcano">
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22869_hires.jpg" alt="Active Dunes in Wirtz Crater">
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA22569_hires.jpg" alt="Supernova Remnant G54">
      </figure>
    </li>
  </ul>
</main>
</body>
</html>

4. By badalsaibo

Made by badalsaibo. Simple Responsive CSS Galley with Hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Raleway:600,900" rel="stylesheet">
<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Raleway;
  background-color: #202125;
}

.heading {
    text-align: center;
    font-size: 2.0em;
    letter-spacing: 1px;
    padding: 40px;
    color: white;
}

.gallery-image {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gallery-image img {
  height: 250px;
  width: 350px;
  transform: scale(1.0);
  transition: transform 0.4s ease;
}

.img-box {
  box-sizing: content-box;
  margin: 10px;
  height: 250px;
  width: 350px;
  overflow: hidden;
  display: inline-block;
  color: white;
  position: relative;
  background-color: white;
}

.caption {
  position: absolute;
  bottom: 5px;
  left: 20px;
  opacity: 0.0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.transparent-box {
  height: 250px;
  width: 350px;
  background-color:rgba(0, 0, 0, 0);
  position: absolute;
  top: 0;
  left: 0;
  transition: background-color 0.3s ease;
}

.img-box:hover img { 
  transform: scale(1.1);
}

.img-box:hover .transparent-box {
  background-color:rgba(0, 0, 0, 0.5);
}

.img-box:hover .caption {
  transform: translateY(-20px);
  opacity: 1.0;
}

.img-box:hover {
  cursor: pointer;
}

.caption > p:nth-child(2) {
  font-size: 0.8em;
}

.opacity-low {
  opacity: 0.5;
}
</style>
</head>
<body>
  <p class="heading">CSS Gallery</p>
  <div class="gallery-image">
    <div class="img-box">
      <img src="https://picsum.photos/350/250?image=444" alt="" />
      <div class="transparent-box">
        <div class="caption">
          <p>Library</p>
          <p class="opacity-low">Architect Design</p>
        </div>
      </div> 
    </div>
    <div class="img-box">
      <img src="https://picsum.photos/350/250/?image=232" alt="" />
      <div class="transparent-box">
        <div class="caption">
          <p>Night Sky</p>
          <p class="opacity-low">Cinematic</p>
        </div>
      </div>
    </div>
    <div class="img-box">
      <img src="https://picsum.photos/350/250/?image=431" alt="" />
      <div class="transparent-box">
        <div class="caption">
          <p>Tea Talk</p>
          <p class="opacity-low">Composite</p>
        </div>
      </div>
    </div>
    <div class="img-box">
      <img src="https://picsum.photos/350/250?image=474" alt="" />
      <div class="transparent-box">
        <div class="caption">
          <p>Road</p>
          <p class="opacity-low">Landscape</p>
        </div>
      </div> 
    </div>
    <div class="img-box">
      <img src="https://picsum.photos/350/250?image=344" alt="" />
      <div class="transparent-box">
        <div class="caption">
          <p>Sea</p>
          <p class="opacity-low">Cityscape</p>
        </div>
      </div> 
    </div>
    <div class="img-box">
      <img src="https://picsum.photos/350/250?image=494" alt="" />
      <div class="transparent-box">
        <div class="caption">
          <p>Vintage</p>
          <p class="opacity-low">Cinematic</p>
        </div>
      </div> 
    </div>
  </div>
</body>
</html>
 

5. By Mojtaba Seyedi

Made by Mojtaba Seyedi. Animated Covers. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
body {
  background-color: #E43;
}

.container {
  width  : 960px;
  margin : 0 auto;
}

.container:after{
  clear   : both;
  display : table;
  content : '';
}

.bg-items {
  padding: 20px;
  width  : 240px;
  height : 160px;
  margin : 20px;
  background-color: white;
  float  : left;
  cursor : pointer;
  box-shadow : 3px 3px 5px 0px rgba(0,0,0,0.5);
}

.items {
  width  : 240px;
  height : 160px;
  position: relative;
  overflow: hidden;
  background-color: #102B46;
}

.details {
  background-color : rgba(0,0,0,0.5);
  width            : 220px;
  height           : 140px;
  padding          : 10px;
  top : 0;
  left: 0;
  font-family : georgia;
  color       : #fff;
  opacity : 0;
  transition : opacity .8s;
}

.details h3 {
  margin-bottom : 20px;
}

.details h6 {
  text-align : right;
  margin-top : 40px;
}

.details p {
  font-size : 14px;
  font-style: italic;
  text-align: center;
  line-height : 20px;
}

.items:hover .details {
  opacity : 1;
  transition : opacity .2s .3s;
}

.items div {
  position : absolute;
}

/* one */

.one {
  left   : 100%;
  bottom : 100%;
  width : inherit;
  height: inherit;
  background-color : #e43;
  transition   : all .3s;
}

.items:hover .one {
  transition   : all .3s;
  left   : 0;
  bottom : 0;
}

/* two */

.two {
  width : inherit;
  height: inherit;
  background-color : #e43;
  transition   : all .3s;
  left   : 0;
  bottom : 100%;
}

.items:hover .two {
  transform : rotate(180deg);
  left   : 0;
  bottom : 0;
  transition   : all .3s;
}

/* three */

.three {
  left : 0;
  top  : 0;
  width : inherit;
  height: inherit;
  background-color : #e43;
  transition   : all .3s;
  transform: scale(0,0);
}

.items:hover .three {
  left : 0;
  top  : 0;
  transform : scale(1,1);	
  transition : all .3s;
}

/* four */

.four {
  width : inherit;
  height: inherit;
  background-color : #e43;
  transition   : all .3s;
  left : 0;
  top  : 0;
  transform: scale(0,0) rotate(0deg);
}

.items:hover .four {
  left : 0;
  top  : 0;
  transform: scale(1,1) rotate(1080deg);
  transition   : all .3s;
}

/* five */

.tl5 {
  border-top   : 161px solid #e43;
  border-right : 241px solid transparent;
  top  : -160px;
  left : -240px;
  transition   : all .3s;			
}

.br5 {
  border-bottom : 161px solid #e43;
  border-left   : 241px solid transparent;
  bottom : -160px;
  right  : -240px;
  transition   : all .3s;			
}

.items:hover .tl5 {
  top  : 0;
  left : 0;
  transition   : all .3s;
}

.items:hover .br5 {
  bottom : 0;
  right  : 0;
  transition   : all .3s;
}

/* six */

.tl6 {
  width  : 120px;
  height : 80px;
  background-color: #e43;
  top  : -80px;
  left : -240px;
  transition   : all .3s;			
}

.tr6 {
  width  : 120px;
  height : 80px;
  background-color: #e43;
  top   : -80px;
  right : -240px;
  transition   : all .3s;			
}

.br6 {
  width  : 120px;
  height : 80px;
  background-color: #e43;
  bottom: -80px;
  right : -240px;
  transition   : all .3s;
}

.bl6 {
  width  : 120px;
  height : 80px;
  background-color: #e43;
  bottom : -80px;
  left   : -240px;
  transition   : all .3s;
}

.items:hover .tl6 {
  top  : 0;
  left : 0;
  transition   : all .3s;
}

.items:hover .tr6 {
  top   : 0;
  right : 0;
  transition   : all .3s;
}

.items:hover .br6 {
  bottom : 0;
  right  : 0;
  transition   : all .3s;
}

.items:hover .bl6 {
  bottom : 0;
  left   : 0;
  transition   : all .3s;
}

/* seven */

.seven {
  width  : 240px;
  height : 160px;
  background-color : #e43;
  opacity : 0;
  transition   : all .3s;
}

.items:hover .seven {
  opacity    : 1;
  transition : all .3s;
}

/* eight */

.eight {
  top           : 30%;
  left          : 10%;
  border-right  :  100px solid transparent;
  border-bottom :  70px  solid #e43;
  border-left   :  100px solid transparent;
  transform: rotate(35deg) scale(0,0);
  transition : all .6s;
}

.eight:before {
  border-bottom: 80px solid #e43;
  border-left  : 30px solid transparent;
  border-right : 30px solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: -45px;
  left: -65px;
  display: block;
  content: '';
  transform: rotate(-35deg);			   
}

.eight:after {
  position: absolute;
  display: block;
  color: #e43;
  top: 3px;
  left: -105px;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid #e43;
  border-left: 100px solid transparent;
  transform: rotate(-70deg);
  content: '';
}

.items:hover .eight {
  transform: rotate(35deg) scale(3.5,3.5);
  transition : all .6s;
  
}

/* nine */

.nine {
  width : 0;
  height: 0;
  top   : 50%;
  left  : 50%;
  background-color: #e43;
  border-radius : 50%;
  transition : all .3s;
}

.items:hover .nine {
  width : 340px;
  height: 260px;
  top   : -50px;
  left  : -50px;
  transition : all .6s;
  
}

/* ten */

.ten {
  width  : inherit;
  height : 40px;
  background-color: #e43;
  left   : 100%;
}

.ten.i {
  top : 0;
  transition : all .2s;
}

.ten.ii {
  top : 40px;
  transition : all .4s;
}

.ten.iii {
  top : 80px;
  transition : all .6s;
}

.ten.iv {
  top : 120px;
  transition : all .8s;
}

.items:hover .i {
  left : 0;
  transition : all .2s;			
}

.items:hover .ii {
  left : 0;
  transition : all .4s;
}

.items:hover .iii {
  left : 0;
  transition : all .6s;
}

.items:hover .iv {
  left : 0;
  transition : all .8s;
}

/* eleven */

.eleven {
  width  : inherit;
  height : 40px;
  background-color: #e43;
  transition : all .3s;
}

.eleven.i {
  top : 0;
  left : -100%;
  
}

.eleven.ii {
  top : 40px;
  left : 100%;
}

.eleven.iii {
  top : 80px;
  left : -100%;
}

.eleven.iv {
  left : 100%;
  top  : 120px;
}

.items:hover .eleven {
  left : 0;
  transition : all .4s ;
}

/* twelve */

.twelve {
  width  : inherit;
  height : 40px;
  background-color: #e43;
  transition : all .3s;
  top : -40px;
}

.twelve.iv {
  transition : all .1s;
}

.twelve.iii {
  transition : all .1s .1s;
}

.twelve.ii {
  transition : all .1s .2s;
}

.twelve.i {
  transition : all .1s .3s;
}

.items:hover .twelve.i {
  top : 120px;
  transition : all .2s;
}

.items:hover .twelve.ii {
  top : 80px;
  transition : all .2s .2s ;
}

.items:hover .twelve.iii {
  top : 40px;
  transition : all .2s .4s ;
}

.items:hover .twelve.iv {
  top : 0px;
  transition : all  .2s .6s;
}

/* thirteen */

.thirteen-r , .thirteen-l{
  width : 120px;
  height: inherit;
  background-color : #e43;
  top : 0;
  transition : all .3s;
}

.thirteen-r {
  left : 100%;
}

.thirteen-l {
  right : 100%;
}

.items:hover .thirteen-r {
  transition : all .3s;
  left : 0;
}

.items:hover .thirteen-l {
  transition : all .3s;
  right : 0;
}

/* fourteen */

.fourteen-r , .fourteen-l{
  width : 120px;
  height: inherit;
  background-color : #e43;
  top : 0;
  transition : all .3s;
}

.fourteen-r {
  left : 100%;
}

.fourteen-l {
  right : 100%;
}

.items:hover .fourteen-r {
  transition : all .3s;
  left : 50%;
}

.items:hover .fourteen-l {
  transition : all .3s;
  right : 50%;
}

/* fifteen */

.t {
  border-style : solid;
  border-width : 80px 120px 0 120px;			
  border-color : #e43 transparent transparent transparent;
  transition   : all .3s;
  top : -80px;
}

.r {
  border-style : solid;
  border-width : 80px 120px 80px 0;	
  border-color : transparent #e43 transparent transparent;
  right : -120px;
  transition   : all .3s;
}

.b {
  border-style : solid;
  border-width : 0 120px 80px 120px;
  border-color : transparent transparent #e43 transparent;
  bottom : -80px;
  transition   : all .3s;
}

.l {
  border-style : solid;
  border-width : 80px 0 80px 120px;	
  border-color : transparent transparent transparent #e43;
  left : -120px;
  transition   : all .3s;
}


.items:hover .t {
  top : 0px;
  transition : all .3s;
}

.items:hover .r {
  right : 0px;
  transition : all .3s;
}

.items:hover .b {
  bottom : 0px;
  transition : all .3s;
}

.items:hover .l {
  left : 0px;
  transition : all .3s;
}
</style>
</head>
<body>
  <div class="container">
  <div class="bg-items">
    <div class="items" style="background-image : url('https://picsum.photos/240/160/?image=1082');">
      <div class="one"></div>
      <div class="details">
        <h3>#1</h3>
        <p>this is a description for your photo in your gallery.</p>
        <h6>time &amp; date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('https://picsum.photos/240/160/?image=1069');">
      <div class="two"></div>
      <div class="details">
        <h3>#2</h3>
        <p>this is a description for your photo in your gallery.</p>
        <h6>time &amp; date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('https://picsum.photos/240/160/?image=1070');">
      <div class="three"></div>
      <div class="details">
        <h3>#3</h3>
        <p>this is a description for your photo in your gallery.</p>
        <h6>time &amp; date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('https://picsum.photos/240/160/?image=1043');">
      <div class="four"></div>
      <div class="details">
        <h3>#4</h3>
        <p>this is a description for your photo in your gallery.</p>
        <h6>time &amp; date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('https://picsum.photos/240/160/?image=1027');">
      <div class="tl5"></div>
      <div class="br5"></div>
      <div class="details">
        <h3>#5</h3>
        <p>this is a description for your photo in your gallery.</p>
        <h6>time &amp; date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('https://picsum.photos/240/160/?image=1025');">
      <div class="tl6"></div>
      <div class="tr6"></div>
      <div class="bl6"></div>
      <div class="br6"></div>
      <div class="details">
        <h3>#6</h3>
        <p>this is a description for your photo in your gallery.</p>
        <h6>time &amp; date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('https://picsum.photos/240/160/?image=1016');">
      <div class="seven"></div>
      <div class="details">
        <h3>#7</h3>
        <p>this is a description for your photo in your gallery.</p>
        <h6>time &amp; date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('https://picsum.photos/240/160/?image=1015');">
      <div class="eight"></div>
      <div class="details">
        <h3>#8</h3>
        <p>this is a description for your photo in your gallery.</p>
        <h6>time &amp; date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('https://picsum.photos/240/160/?image=998');">
      <div class="nine"></div>
      <div class="details">
        <h3>#9</h3>
        <p>this is a description for your photo in your gallery.</p>
        <h6>time &amp; date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('https://picsum.photos/240/160/?image=1011');">
      <div class="ten i"></div>
      <div class="ten ii"></div>
      <div class="ten iii"></div>
      <div class="ten iv"></div>
      <div class="details">
        <h3>#10</h3>
        <p>this is a description for your photo in your gallery.</p>
        <h6>time &amp; date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('https://picsum.photos/240/160/?image=999');">
      <div class="eleven i"></div>
      <div class="eleven ii"></div>
      <div class="eleven iii"></div>
      <div class="eleven iv"></div>
      <div class="details">
        <h3>#11</h3>
        <p>this is a description for your photo in your gallery.</p>
        <h6>time &amp; date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('https://picsum.photos/240/160/?image=976');">
      <div class="twelve i"></div>
      <div class="twelve ii"></div>
      <div class="twelve iii"></div>
      <div class="twelve iv"></div>
      <div class="details">
        <h3>#12</h3>
        <p>this is a description for your photo in your gallery.</p>
        <h6>time &amp; date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('https://picsum.photos/240/160/?image=950');">
      <div class="thirteen-l"></div>
      <div class="thirteen-r"></div>
      <div class="details">
        <h3>#13</h3>
        <p>this is a description for your photo in your gallery.</p>
        <h6>time &amp; date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('https://picsum.photos/240/160/?image=947');">
      <div class="fourteen-l"></div>
      <div class="fourteen-r"></div>
      <div class="details">
        <h3>#14</h3>
        <p>this is a description for your photo in your gallery.</p>
        <h6>time &amp; date</h6>
      </div>
    </div>
  </div>
  <div class="bg-items">
    <div class="items" style="background-image : url('https://picsum.photos/240/160/?image=941');">
      <div class="t"></div>
      <div class="r"></div>
      <div class="b"></div>
      <div class="l"></div>
      <div class="details">
        <h3>#15</h3>
        <p>this is a description for your photo in your gallery.</p>
        <h6>time &amp; date</h6>
      </div>
    </div>
  </div>
</div>
</body>
</html>
 

6. By Cynthia Costa

Made by Cynthia Costa. Flex image gallery with hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
.gallery {
  display: flex;
  padding: 2px;
  transition: 0.3s;
}
.gallery:hover .gallery__image {
  filter: grayscale(1);
}
.gallery__column {
  display: flex;
  flex-direction: column;
  width: 25%;
}
.gallery__link {
  margin: 2px;
  overflow: hidden;
}
.gallery__link:hover .gallery__image {
  filter: grayscale(0);
}
.gallery__link:hover .gallery__caption {
  opacity: 1;
}
.gallery__thumb {
  position: relative;
}
.gallery__image {
  display: block;
  width: 100%;
  transition: 0.3s;
}
.gallery__image:hover {
  transform: scale(1.1);
}
.gallery__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 25px 15px 15px;
  width: 100%;
  font-family: "Raleway", sans-serif;
  font-size: 16px;
  color: white;
  opacity: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  transition: 0.3s;
}
</style>
</head>
<body>
  <link href="https://fonts.googleapis.com/css2?family=Raleway:[email protected]&display=swap" rel="stylesheet">

<div class="gallery">
	<div class="gallery__column">
		<a href="https://unsplash.com/@jeka_fe" target="_blank" class="gallery__link">
			<figure class="gallery__thumb">
				<img src="https://source.unsplash.com/_cvwXhGqG-o/300x300" alt="Portrait by Jessica Felicio" class="gallery__image">
				<figcaption class="gallery__caption">Portrait by Jessica Felicio</figcaption>
			</figure>
		</a>

		<a href="https://unsplash.com/@oladimeg" target="_blank" class="gallery__link">
			<figure class="gallery__thumb">
				<img src="https://source.unsplash.com/AHBvAIVqk64/300x500" alt="Portrait by Oladimeji Odunsi" class="gallery__image">
				<figcaption class="gallery__caption">Portrait by Oladimeji Odunsi</figcaption>
			</figure>
		</a>

		<a href="https://unsplash.com/@a2eorigins" target="_blank" class="gallery__link">
			<figure class="gallery__thumb">
				<img src="https://source.unsplash.com/VLPLo-GtrIE/300x300" alt="Portrait by Alex Perez" class="gallery__image">
				<figcaption class="gallery__caption">Portrait by Alex Perez</figcaption>
			</figure>
		</a>
	</div>
	
	<div class="gallery__column">
		<a href="https://unsplash.com/@noahbuscher" target="_blank" class="gallery__link">
			<figure class="gallery__thumb">
				<img src="https://source.unsplash.com/AR7aumwKr2s/300x300" alt="Portrait by Noah Buscher" class="gallery__image">
				<figcaption class="gallery__caption">Portrait by Noah Buscher</figcaption>
			</figure>
		</a>
		
		<a href="https://unsplash.com/@von_co" target="_blank" class="gallery__link">
			<figure class="gallery__thumb">
				<img src="https://source.unsplash.com/dnL6ZIpht2s/300x300" alt="Portrait by Ivana Cajina" class="gallery__image">
				<figcaption class="gallery__caption">Portrait by Ivana Cajina</figcaption>
			</figure>
		</a>

		<a href="https://unsplash.com/@samburriss" target="_blank" class="gallery__link">
			<figure class="gallery__thumb">
				<img src="https://source.unsplash.com/tV_1sC603zA/300x500" alt="Portrait by Sam Burriss" class="gallery__image">
				<figcaption class="gallery__caption">Portrait by Sam Burriss</figcaption>
			</figure>
		</a>
	</div>
	
	<div class="gallery__column">
		<a href="https://unsplash.com/@marilezhava" target="_blank" class="gallery__link">
			<figure class="gallery__thumb">
				<img src="https://source.unsplash.com/Xm9-vA_bhm0/300x500" alt="Portrait by Mari Lezhava" class="gallery__image">
				<figcaption class="gallery__caption">Portrait by Mari Lezhava</figcaption>
			</figure>
		</a>
		
		<a href="https://unsplash.com/@ethanhaddox" target="_blank" class="gallery__link">
			<figure class="gallery__thumb">
				<img src="https://source.unsplash.com/NTjSR3zYpsY/300x300" alt="Portrait by Ethan Haddox" class="gallery__image">
				<figcaption class="gallery__caption">Portrait by Ethan Haddox</figcaption>
			</figure>
		</a>

		<a href="https://unsplash.com/@mr_geshani" target="_blank" class="gallery__link">
			<figure class="gallery__thumb">
				<img src="https://source.unsplash.com/2JH8d3ChNec/300x300" alt="Portrait by Amir Geshani" class="gallery__image">
				<figcaption class="gallery__caption">Portrait by Amir Geshani</figcaption>
			</figure>
		</a>
	</div>
	
	<div class="gallery__column">
		<a href="https://unsplash.com/@frxgui" target="_blank" class="gallery__link">
			<figure class="gallery__thumb">
				<img src="https://source.unsplash.com/FQhLLehm4dk/300x300" alt="Portrait by Guilian Fremaux" class="gallery__image">
				<figcaption class="gallery__caption">Portrait by Guilian Fremaux</figcaption>
			</figure>
		</a>

		<a href="https://unsplash.com/@majestical_jasmin" target="_blank" class="gallery__link">
			<figure class="gallery__thumb">
				<img src="https://source.unsplash.com/OQd9zONSx7s/300x300" alt="Portrait by Jasmin Chew" class="gallery__image">
				<figcaption class="gallery__caption">Portrait by Jasmin Chew</figcaption>
			</figure>
		</a>
		
		<a href="https://unsplash.com/@dimadallacqua" target="_blank" class="gallery__link">
			<figure class="gallery__thumb">
				<img src="https://source.unsplash.com/XZkEhowjx8k/300x500" alt="Portrait by Dima DallAcqua" class="gallery__image">
				<figcaption class="gallery__caption">Portrait by Dima DallAcqua</figcaption>
			</figure>
		</a>
	</div>
</div>
</body>
</html>

7. By Russ Perry

Made by Russ Perry. Photo gallery with grayscale hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: sans-serif;
}

h1 {
  color: coral;
}

.grid-container {
  columns: 5 200px;
  column-gap: 1.5rem;
  width: 90%;
  margin: 0 auto;
}
.grid-container div {
  width: 150px;
  margin: 0 1.5rem 1.5rem 0;
  display: inline-block;
  width: 100%;
  border: solid 2px black;
  padding: 5px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  transition: all 0.25s ease-in-out;
}
.grid-container div:hover img {
  filter: grayscale(0);
}
.grid-container div:hover {
  border-color: coral;
}
.grid-container div img {
  width: 100%;
  filter: grayscale(100%);
  border-radius: 5px;
  transition: all 0.25s ease-in-out;
}
.grid-container div p {
  margin: 5px 0;
  padding: 0;
  text-align: center;
  font-style: italic;
}
</style>
</head>
<body>
  <h1>The Purest of Doggos</h1>
<div class="grid-container">
  <div>
    <img class='grid-item grid-item-1' src='https://images.unsplash.com/photo-1544568100-847a948585b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
    <p>"I'm so happy today!"</p>
  </div>
  <div>
    <img class='grid-item grid-item-2' src='https://images.unsplash.com/photo-1517423440428-a5a00ad493e8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
    <p>"I see those nugs."</p>
  </div>
  <div>
    <img class='grid-item grid-item-3' src='https://images.unsplash.com/photo-1510771463146-e89e6e86560e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
    <p>"I love you so much!"</p>
  </div>
  <div>
    <img class='grid-item grid-item-4' src='https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
    <p>"I'm the baby of the house!"</p>
  </div>
  <div>
    <img class='grid-item grid-item-5' src='https://images.unsplash.com/photo-1530281700549-e82e7bf110d6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
    <p>"Are you gunna throw the ball?"</p>
  </div>
  <div>
    <img class='grid-item grid-item-6' src='https://images.unsplash.com/photo-1548199973-03cce0bbc87b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
    <p>"C'mon friend!"</p>
  </div>
  <div>
    <img class='grid-item grid-item-7' src='https://images.unsplash.com/photo-1552053831-71594a27632d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
    <p>"A rose for mommy!"</p>
  </div>
  <div>
    <img class='grid-item grid-item-8' src='https://images.unsplash.com/photo-1518717758536-85ae29035b6d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
    <p>"You gunna finish that?"</p>
  </div>
  <div>
    <img class='grid-item grid-item-9' src='https://images.unsplash.com/photo-1535930891776-0c2dfb7fda1a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
    <p>"We can't afford a cat!"</p>
  </div>
  <div>
    <img class='grid-item grid-item-10' src='https://images.unsplash.com/photo-1504595403659-9088ce801e29?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
    <p>"Dis my fren!"</p>
  </div>
</div>
</body>
</html>

8. By Vince Brown

Made by Vince Brown. Rad Responsive Gallery with Hover transitions. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Oswald:700,300' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
* {
  box-sizing: border-box;
}

body {
  background-image: url("https://subtlepatterns.com/patterns/sativa.png");
}

.title {
  text-align: center;
  font-family: "Oswald";
  font-weight: 100;
  font-size: 3.75rem;
  letter-spacing: 5px;
  background: linear-gradient(rgba(255, 0, 0, 0), #444, rgba(255, 0, 0, 0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0;
}
@media screen and (min-width: 37.5em) {
  .title {
    font-size: 4.75rem;
  }
}

p {
  margin: 0 auto 2rem;
  text-align: center;
  font-family: "oswald";
  font-size: 1.25rem;
  color: #444;
  font-weight: 100;
  width: 90%;
}
@media screen and (min-width: 37.5em) {
  p {
    height: 70%;
  }
}

.case-study-gallery {
  margin-top: 50px;
  width: 90%;
  margin: 50px auto;
  max-width: 1100px;
}

.case-study {
  position: relative;
  display: block;
  width: 90%;
  height: 250px;
  margin: 0 auto 2rem;
  background-size: cover;
  border-radius: 10px;
  box-shadow: 0px 25px 50px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  transition: all 0.4s ease;
}
@media screen and (min-width: 37.5em) {
  .case-study {
    height: 300px;
  }
}
@media screen and (min-width: 45em) {
  .case-study {
    display: inline-block;
    width: 45%;
    margin-left: 25px;
  }
}

.case-study__img {
  width: 90%;
  display: block;
  margin-top: 50%;
  transform: translateY(50%);
  margin: 0 auto;
}

.case-study__overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 10;
}
.case-study__overlay:after {
  content: "";
  width: 100%;
  border-radius: 10px;
  height: 100%;
  background-color: #202020;
  opacity: 0;
  position: absolute;
  top: 0;
  z-index: -10;
  left: 0;
  transition: all 0.3s ease;
}

.case-study__title {
  position: relative;
  top: -200px;
  margin-bottom: 2rem;
  margin-top: 4rem;
  font-size: 2.25rem;
  font-family: "Oswald";
  font-weight: 100;
  color: white;
  text-align: center;
  letter-spacing: 5px;
  transition: all 0.3s cubic-bezier(0.3, 0, 0, 1.3);
}

.case-study__link {
  position: relative;
  display: block;
  width: 60%;
  top: 200px;
  padding: 10px;
  margin: 0 auto;
  font-family: "Oswald";
  color: white;
  letter-spacing: 3px;
  text-decoration: none;
  text-align: center;
  border: 2px solid white;
  border-radius: 3px;
  font-size: 1.25em;
  transition: all 0.3s cubic-bezier(0.3, 0, 0, 1.3);
}
.case-study__link:hover {
  background-color: white;
  color: #202020;
}

.case-study:hover .case-study__title {
  top: 0;
}
.case-study:hover .case-study__link {
  top: 0;
}
.case-study:hover .case-study__overlay:after {
  opacity: 0.75;
}

.study1 {
  background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2014/01/unsplash-contemplative.jpg");
}

.study2 {
  background-image: url("http://imgs.abduzeedo.com/files/paul0v2/unsplash/unsplash-04.jpg");
}

.study3 {
  background-image: url("http://415vince.com/wp-content/uploads/2014/07/unsplash-mts.jpg");
}

.study4 {
  background-image: url("https://41.media.tumblr.com/8d41610b4f5e7d5b68e4430b736fbeb3/tumblr_n4vbj2Vv8h1st5lhmo1_1280.jpg");
}

.study5 {
  background-image: url("http://publicdomainarchive.com/wp-content/uploads/2014/06/public-domain-images-free-stock-photos-high-quality-resolution-downloads-unsplash0067-1000x666.jpg");
}

.study6 {
  background-image: url("http://www.bedlammag.com/wp-content/uploads/2014/04/unsplash-love-yourself-article-e1397699812178.jpg");
}
</style>
</head>
<body>
  <div class="case-study-gallery">
  <h1 class="title">CASE STUDIES</h1>
  <p>This is an example of a portfolio gallery. It has some simple hover transitions and is pretty rad.</p>
<div class="case-study study1">
	<figure>
		<img class="case-study__img" src="https://static.squarespace.com/static/51b79838e4b0b8b55c75cf91/t/51c4b688e4b03003ea9f1a63/1371846281755/Hexxis+Logo+White.png" alt="" />
	</figure>
  <div class="case-study__overlay">
  	<h2 class="case-study__title">Developing Hexxis</h2>
    <a class="case-study__link" href="#">View Case Study</a>
  </div>
</div>
  
<div class="case-study study2">
	<figure>
		<img class="case-study__img" src="https://static.squarespace.com/static/51b79838e4b0b8b55c75cf91/t/51c4b688e4b03003ea9f1a63/1371846281755/Hexxis+Logo+White.png" alt="" />
	</figure>
  <div class="case-study__overlay">
  	<h2 class="case-study__title">Developing Hexxis</h2>
    <a class="case-study__link" href="#">View Case Study</a>
  </div>
</div>
  
<div class="case-study study3">
	<figure>
		<img class="case-study__img" src="https://static.squarespace.com/static/51b79838e4b0b8b55c75cf91/t/51c4b688e4b03003ea9f1a63/1371846281755/Hexxis+Logo+White.png" alt="" />
	</figure>
  <div class="case-study__overlay">
  	<h2 class="case-study__title">Developing Hexxis</h2>
    <a class="case-study__link" href="#">View Case Study</a>
  </div>
</div>
  
<div class="case-study study4">
	<figure>
		<img class="case-study__img" src="https://static.squarespace.com/static/51b79838e4b0b8b55c75cf91/t/51c4b688e4b03003ea9f1a63/1371846281755/Hexxis+Logo+White.png" alt="" />
	</figure>
  <div class="case-study__overlay">
  	<h2 class="case-study__title">Developing Hexxis</h2>
    <a class="case-study__link" href="#">View Case Study</a>
  </div>
</div>
  
<div class="case-study study5">
	<figure>
		<img class="case-study__img" src="https://static.squarespace.com/static/51b79838e4b0b8b55c75cf91/t/51c4b688e4b03003ea9f1a63/1371846281755/Hexxis+Logo+White.png" alt="" />
	</figure>
  <div class="case-study__overlay">
  	<h2 class="case-study__title">Developing Hexxis</h2>
    <a class="case-study__link" href="#">View Case Study</a>
  </div>
</div>
  
<div class="case-study study6">
	<figure>
		<img class="case-study__img" src="https://static.squarespace.com/static/51b79838e4b0b8b55c75cf91/t/51c4b688e4b03003ea9f1a63/1371846281755/Hexxis+Logo+White.png" alt="" />
	</figure>
  <div class="case-study__overlay">
  	<h2 class="case-study__title">Developing Hexxis</h2>
    <a class="case-study__link" href="#">View Case Study</a>
  </div>
</div>
</div>
</body>
</html>

9. By Devopix

Made by Devopix. CSS only Responsive Image gallery. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
.gallery:after, .content:after {
  content: "";
  display: table;
  clear: both;
}

body {
  background: #eee;
  color: #666;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-backface-visibility: hidden;
  text-align: center;
  font-weight: 300;
}

h1, h2 {
  font-weight: 200;
  color: #999;
}

h1 {
  font-size: 38px;
  margin-bottom: 2.1739130435%;
}

p {
  color: #666;
}

hr {
  background: none;
  margin: 4.347826087% 0;
  border: none;
  border-bottom: 1px solid #ddd;
}

a {
  text-decoration: none;
  color: #FF0080;
}

.container {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  margin: 0 auto;
}
.container:after {
  content: " ";
  display: block;
  clear: both;
}

.content {
  padding: 4.347826087%;
}
.content img {
  width: 100%;
}

.gallery {
  margin: 0 auto;
  text-align: center;
  width: 100%;
}
.gallery li {
  width: 21.7391304348%;
  float: left;
  text-align: center;
  position: relative;
  margin-bottom: 4.347826087%;
  display: inline-block;
}
.gallery li:nth-child(4n+1) {
  margin-left: 0;
  margin-right: -100%;
  clear: both;
  margin-left: 0;
}
.gallery li:nth-child(4n+2) {
  margin-left: 26.0869565217%;
  margin-right: -100%;
  clear: none;
}
.gallery li:nth-child(4n+3) {
  margin-left: 52.1739130435%;
  margin-right: -100%;
  clear: none;
}
.gallery li:nth-child(4n+4) {
  margin-left: 78.2608695652%;
  margin-right: -100%;
  clear: none;
}
@media (max-width: 48rem) {
  .gallery li {
    width: 30.4347826087%;
    float: left;
  }
  .gallery li:nth-child(3n+1) {
    margin-left: 0;
    margin-right: -100%;
    clear: both;
    margin-left: 0;
  }
  .gallery li:nth-child(3n+2) {
    margin-left: 34.7826086957%;
    margin-right: -100%;
    clear: none;
  }
  .gallery li:nth-child(3n+3) {
    margin-left: 69.5652173913%;
    margin-right: -100%;
    clear: none;
  }
}
@media (max-width: 30rem) {
  .gallery li {
    width: 47.8260869565%;
    float: left;
  }
  .gallery li:nth-child(2n+1) {
    margin-left: 0;
    margin-right: -100%;
    clear: both;
    margin-left: 0;
  }
  .gallery li:nth-child(2n+2) {
    margin-left: 52.1739130435%;
    margin-right: -100%;
    clear: none;
  }
}
@media (max-width: 20rem) {
  .gallery li {
    width: 100%;
    float: left;
  }
  .gallery li:nth-child(1n+1) {
    margin-left: 0;
    margin-right: -100%;
    clear: both;
    margin-left: 0;
  }
}
.gallery li h2 {
  color: #999;
  font-size: 13.5px;
  letter-spacing: 1px;
  margin-top: 2.1739130435%;
  text-transform: uppercase;
}
.gallery li .imgwrap {
  background-color: #fff;
  padding: 8px;
  position: relative;
  border-radius: 2px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.gallery li .imgmask {
  background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Plus_font_awesome.svg/2000px-Plus_font_awesome.svg.png") 50%/25px no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
  vertical-align: bottom;
  text-align: center;
  transition: all 0.25s ease-out;
}
.gallery li img {
  width: 100%;
  vertical-align: top;
  transition: all 0.25s ease-out;
}
@media (max-width: 20rem) {
  .gallery li img {
    width: 100%;
  }
}
.gallery li:hover img {
  opacity: 0;
  transition: all 0.25s ease-out;
}
.gallery li:hover .imgmask {
  background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Plus_font_awesome.svg/2000px-Plus_font_awesome.svg.png") 50%/85px no-repeat;
  opacity: 0.5;
  transition: all 0.25s ease-out;
}

footer {
  font-size: 14.5px;
  text-transform: uppercase;
}
</style>
</head>
<body>
  <div class="container">
  <main class="content">
    <hr>

    <ul class="gallery">

      <li>
        <div class="imgwrap">
          <a href="#">
            <img src="https://unsplash.it/300/300/?random" alt="image">
            <span class="imgmask"></span>
          </a>
        </div>
        <a href="#">
          <h2>Awesome</h2>
        </a>
      </li>

      <li>
        <div class="imgwrap">
          <a href="#">
            <img src="https://unsplash.it/301/301/?random" alt="image">
            <span class="imgmask"></span>
          </a>
        </div>
        <a href="#">
          <h2>Amazing</h2>
        </a>
      </li>

      <li>
        <div class="imgwrap">
          <a href="#">
            <img src="https://unsplash.it/302/302/?random" alt="image">
            <span class="imgmask"></span>
          </a>
        </div>
        <a href="#">
          <h2>Nice Pic</h2>
        </a>
      </li>

      <li>
        <div class="imgwrap">
          <a href="#">
            <img src="https://unsplash.it/303/303/?random" alt="image">
            <span class="imgmask"></span>
          </a>
        </div>
        <a href="#">
          <h2>Sweet</h2>
        </a>
      </li>

      <li>
        <div class="imgwrap">
          <a href="#">
            <img src="https://unsplash.it/304/304/?random" alt="image">
            <span class="imgmask"></span>
          </a>
        </div>
        <a href="#">
          <h2>Cute Image</h2>
        </a>
      </li>

      <li>
        <div class="imgwrap">
          <a href="#">
            <img src="https://unsplash.it/305/305/?random" alt="image">
            <span class="imgmask"></span>
          </a>
        </div>
        <a href="#">
          <h2>Excellent</h2>
        </a>
      </li>

      <li>
        <div class="imgwrap">
          <a href="#">
            <img src="https://unsplash.it/306/306/?random" alt="image">
            <span class="imgmask"></span>
          </a>
        </div>
        <a href="#">
          <h2>Tasty</h2>
        </a>
      </li>

      <li>
        <div class="imgwrap">
          <a href="#">
            <img src="https://unsplash.it/307/307/?random" alt="image">
            <span class="imgmask"></span>
          </a>
        </div>
        <a href="#">
          <h2>Good Stuff</h2>
        </a>
      </li>

      <li>
        <div class="imgwrap">
          <a href="#">
            <img src="https://unsplash.it/308/308/?random" alt="image">
            <span class="imgmask"></span>
          </a>
        </div>
        <a href="#">
          <h2>Pretty</h2>
        </a>
      </li>

      <li>
        <div class="imgwrap">
          <a href="#">
            <img src="https://unsplash.it/309/309/?random" alt="image">
            <span class="imgmask"></span>
          </a>
        </div>
        <a href="#">
          <h2>Fine Art</h2>
        </a>
      </li>

      <li>
        <div class="imgwrap">
          <a href="#">
            <img src="https://unsplash.it/310/310/?random" alt="image">
            <span class="imgmask"></span>
          </a>
        </div>
        <a href="#">
          <h2>Super Duper</h2>
        </a>
      </li>

      <li>
        <div class="imgwrap">
          <a href="#">
            <img src="https://unsplash.it/311/311/?random" alt="image">
            <span class="imgmask"></span>
          </a>
        </div>
        <a href="#">
          <h2>Stuff</h2>
        </a>
      </li>
    </ul>
    <hr>

    <footer>
      Made by <a href="http://www.devopix.co">Devopix</a>
    </footer>
  </main>
</div>
</body>
</html>

10. By Majed

Made by Majed. Responsive Photo Gallery Grid with Lightbox and – No Script. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 5px;
  position: relative;
}

#gallery {
  display: grid;
  height: calc(100vh - 10px);
  grid-template: repeat(6, 1fr)/repeat(6, 1fr);
  grid-gap: 0.5em;
}
@media (max-width: 800px) {
  #gallery {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
  }
  #gallery > div {
    width: 48%;
    margin: 1%;
  }
}
@media (max-width: 800px) and (max-width: 350px) {
  #gallery > div {
    width: 98%;
  }
}
#gallery > div:nth-child(6n+1) {
  grid-column: span 2;
  grid-row: span 2;
}
#gallery > div:nth-child(2) {
  grid-column: span 3;
  grid-row: span 3;
}
#gallery > div:nth-child(4) {
  grid-column: span 1;
  grid-row: span 2;
}
#gallery > div > a {
  opacity: 0;
  position: absolute;
  color: #000;
  background-color: #000;
  font: bold 4em "Helvetica";
  text-shadow: 0 -1px 5px #fff, -1px 0px 5px #fff, 0 1px 5px #fff, 1px 0px 5px #fff;
  padding: 2rem;
  mix-blend-mode: difference;
  width: 100%;
  height: 100%;
  transition: all ease 1s;
}
#gallery > div > img {
  width: 100%;
  min-height: 100%;
  transition: all ease 1s;
}
#gallery > div:hover img {
  filter: blur(4px);
}
#gallery > div:hover a {
  opacity: 1;
}
#gallery > div {
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 20px 0 rgba(0, 0, 0, 0.19);
}
#gallery div,
#gallery a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

[id^=lightbox-] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  opacity: 0;
  transition: opacity 450ms ease-in-out;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
[id^=lightbox-]:target {
  opacity: 1;
  pointer-events: inherit;
}
[id^=lightbox-]:target img {
  filter: blur(0);
}
[id^=lightbox-] .content {
  max-width: 90%;
  position: relative;
  color: #fff;
}
[id^=lightbox-] .content:hover > a.close {
  opacity: 1;
  transform: scale(1, 1);
}
[id^=lightbox-] .content:hover > .title {
  opacity: 1;
  transform: translateY(-3px);
}
[id^=lightbox-] .content:hover > .title::after {
  opacity: 1;
}
[id^=lightbox-] .content > * {
  transition: all 450ms ease-in-out;
}
[id^=lightbox-] .title {
  display: block;
  margin: 0;
  padding: 1em;
  position: absolute;
  bottom: 0;
  width: 100%;
  transform: translateY(50%);
  font-size: 1.5em;
  opacity: 0;
}
[id^=lightbox-] .title::after {
  content: " ";
  background-color: rgba(0, 0, 0, 0.4);
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  transition: all 350ms ease-in-out 250ms;
  opacity: 0;
  transform-origin: bottom;
  mix-blend-mode: soft-light;
}
[id^=lightbox-] img {
  max-height: 90vh;
  max-width: 100%;
  margin: 0;
  padding: 0;
  filter: blur(50px);
}
[id^=lightbox-] a.close {
  width: 2em;
  height: 2em;
  position: absolute;
  right: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0, 0);
  opacity: 0;
  transform-origin: right top;
  text-decoration: none;
  color: #fff;
}
[id^=lightbox-] a.close::after {
  content: "X";
}
</style>
</head>
<body>
  <div id="gallery">
  <div><img src="https://picsum.photos/600/600/?image=512"/><a href="#lightbox-1">512</a></div>
  <div><img src="https://picsum.photos/600/600/?image=513"/><a href="#lightbox-2">513</a></div>
  <div><img src="https://picsum.photos/600/600/?image=514"/><a href="#lightbox-3">514</a></div>
  <div><img src="https://picsum.photos/600/600/?image=515"/><a href="#lightbox-4">515</a></div>
  <div><img src="https://picsum.photos/600/600/?image=516"/><a href="#lightbox-5">516</a></div>
  <div><img src="https://picsum.photos/600/600/?image=517"/><a href="#lightbox-6">517</a></div>
  <div><img src="https://picsum.photos/600/600/?image=518"/><a href="#lightbox-7">518</a></div>
  <div><img src="https://picsum.photos/600/600/?image=519"/><a href="#lightbox-8">519</a></div>
  <div><img src="https://picsum.photos/600/600/?image=520"/><a href="#lightbox-9">520</a></div>
  <div><img src="https://picsum.photos/600/600/?image=521"/><a href="#lightbox-10">521</a></div>
  <div><img src="https://picsum.photos/600/600/?image=522"/><a href="#lightbox-11">522</a></div>
  <div><img src="https://picsum.photos/600/600/?image=523"/><a href="#lightbox-12">523</a></div>
  <div><img src="https://picsum.photos/600/600/?image=524"/><a href="#lightbox-13">524</a></div>
  <div><img src="https://picsum.photos/600/600/?image=525"/><a href="#lightbox-14">525</a></div>
  <div><img src="https://picsum.photos/600/600/?image=526"/><a href="#lightbox-15">526</a></div>
  <div><img src="https://picsum.photos/600/600/?image=527"/><a href="#lightbox-16">527</a></div>
  <div><img src="https://picsum.photos/600/600/?image=528"/><a href="#lightbox-17">528</a></div>
  <div><img src="https://picsum.photos/600/600/?image=529"/><a href="#lightbox-18">529</a></div>
</div>
<div class="lightbox" id="lightbox-1">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=512"/>
    <div class="title">No. <b>512</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-2">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=513"/>
    <div class="title">No. <b>513</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-3">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=514"/>
    <div class="title">No. <b>514</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-4">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=515"/>
    <div class="title">No. <b>515</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-5">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=516"/>
    <div class="title">No. <b>516</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-6">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=517"/>
    <div class="title">No. <b>517</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-7">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=518"/>
    <div class="title">No. <b>518</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-8">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=519"/>
    <div class="title">No. <b>519</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-9">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=520"/>
    <div class="title">No. <b>520</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-10">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=521"/>
    <div class="title">No. <b>521</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-11">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=522"/>
    <div class="title">No. <b>522</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-12">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=523"/>
    <div class="title">No. <b>523</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-13">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=524"/>
    <div class="title">No. <b>524</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-14">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=525"/>
    <div class="title">No. <b>525</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-15">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=526"/>
    <div class="title">No. <b>526</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-16">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=527"/>
    <div class="title">No. <b>527</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-17">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=528"/>
    <div class="title">No. <b>528</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
<div class="lightbox" id="lightbox-18">
  <div class="content"><img src="https://picsum.photos/1920/1080/?image=529"/>
    <div class="title">No. <b>529</b> from Picsum</div><a class="close" href="#gallery"></a>
  </div>
</div>
</body>
</html>

11. By Stephanie

Made by Stephanie. CSS Grid Responsive Image Gallery. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@import url("https://fonts.googleapis.com/css?family=Arvo");
body,
html {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  background: #f5f4f4;
  font-size: 13px;
  font-family: "Arvo", monospace;
}
@supports (display: grid) {
  body,
html {
    display: block;
  }
}

.message {
  border: 1px solid #d2d0d0;
  padding: 2em;
  font-size: 1.7vw;
  box-shadow: -2px 2px 10px 0px rgba(68, 68, 68, 0.4);
}
@supports (display: grid) {
  .message {
    display: none;
  }
}

.section {
  display: none;
  padding: 2rem;
}
@media screen and (min-width: 768px) {
  .section {
    padding: 4rem;
  }
}
@supports (display: grid) {
  .section {
    display: block;
  }
}

h1 {
  font-size: 2rem;
  margin: 0 0 1.5em;
}

.grid {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: 150px;
  grid-auto-flow: row dense;
}

.item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  background: #0c9a9a;
  color: #fff;
  grid-column-start: auto;
  grid-row-start: auto;
  color: #fff;
  background: url("https://images.unsplash.com/photo-1470124182917-cc6e71b22ecc?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=");
  background-size: cover;
  background-position: center;
  box-shadow: -2px 2px 10px 0px rgba(68, 68, 68, 0.4);
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
  counter-increment: item-counter;
}
.item:nth-of-type(3n) {
  background-image: url("https://images.unsplash.com/photo-1422255198496-21531f12a6e8?dpr=2&auto=format&fit=crop&w=1500&h=996&q=80&cs=tinysrgb&crop=");
}
.item:nth-of-type(4n) {
  background-image: url("https://images.unsplash.com/photo-1490914327627-9fe8d52f4d90?dpr=2&auto=format&fit=crop&w=1500&h=2250&q=80&cs=tinysrgb&crop=");
}
.item:nth-of-type(5n) {
  background-image: url("https://images.unsplash.com/photo-1476097297040-79e9e1603142?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=");
}
.item:nth-of-type(6n) {
  background-image: url("https://images.unsplash.com/photo-1464652149449-f3b8538144aa?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=");
}
.item:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.3;
  transition: opacity 0.3s ease-in-out;
}
.item:hover {
  transform: scale(1.05);
}
.item:hover:after {
  opacity: 0;
}
.item--medium {
  grid-row-end: span 2;
}
.item--large {
  grid-row-end: span 3;
}
.item--full {
  grid-column-end: auto;
}
@media screen and (min-width: 768px) {
  .item--full {
    grid-column: 1/-1;
    grid-row-end: span 2;
  }
}
.item__details {
  position: relative;
  z-index: 1;
  padding: 15px;
  color: #444;
  background: #fff;
  text-transform: lowercase;
  letter-spacing: 1px;
  color: #828282;
}
.item__details:before {
  content: counter(item-counter);
  font-weight: bold;
  font-size: 1.1rem;
  padding-right: 0.5em;
  color: #444;
}
</style>
</head>
<body>
  <div class="message">
  Sorry, your browser does not support CSS Grid. πŸ˜…
</div>
<section class="section">
  <h1>Nom Nom Gallery</h1>
  <div class="grid">
    <div class="item">
      <div class="item__details">
        jelly-o brownie sweet
      </div>
    </div>
    <div class="item item--large">
      <div class="item__details">
        Muffin jelly gingerbread 
      </div>
    </div>
    <div class="item item--medium">
      <div class="item__details">
        sesame snaps chocolate
      </div>
    </div>
    <div class="item item--large">
      <div class="item__details">
        Oat cake
      </div>
    </div>
    <div class="item item--full">
      <div class="item__details">
         jujubes cheesecake
      </div>
    </div>
    <div class="item item--medium">
      <div class="item__details">
        DragΓ©e pudding brownie
      </div>
    </div>
    <div class="item item--large">
      <div class="item__details">
        Oat cake
      </div>
    </div>
    <div class="item">
      <div class="item__details">
        powder toffee
      </div>
    </div>
    <div class="item item--medium">
      <div class="item__details">
        pudding cheesecake
      </div>
    </div>
    <div class="item item--large">
      <div class="item__details">
        toffee bear claw 
      </div>
    </div>
    <div class="item">
      <div class="item__details">
        cake cookie croissant
      </div>
    </div>
    <div class="item item--medium">
      <div class="item__details">
        liquorice sweet roll
      </div>
    </div>
    <div class="item item--medium">
      <div class="item__details">
        chocolate marzipan
      </div>
    </div>
    <div class="item item--large">
      <div class="item__details">
        danish dessert lollipop
      </div>
    </div>
    <div class="item">
      <div class="item__details">
        sugar plum dragΓ©e
      </div>
    </div>
  </div>
</div>
</body>
</html>

12. By Stefan C

Made by Stefan C. Accordion Image Gallery. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Oswald:700" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
html, body {
  width: 100%;
  height: 100%;
}

.container {
  padding: 75px 0;
  margin: 0 auto;
  width: 1140px;
}

h1 {
  position: relative;
  margin-bottom: 45px;
  font-family: "Oswald", sans-serif;
  font-size: 44px;
  text-transform: uppercase;
  color: #424242;
}

.gallery-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 70vh;
}

.item {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  transition: flex 0.8s ease;
}
.item:hover {
  flex: 7;
}

.item-1 {
  background-image: url("https://images.unsplash.com/photo-1499198116522-4a6235013d63?auto=format&fit=crop&w=1233&q=80");
}

.item-2 {
  background-image: url("https://images.unsplash.com/photo-1492760864391-753aaae87234?auto=format&fit=crop&w=1336&q=80");
}

.item-3 {
  background-image: url("https://images.unsplash.com/photo-1503631285924-e1544dce8b28?auto=format&fit=crop&w=1234&q=80");
}

.item-4 {
  background-image: url("https://images.unsplash.com/photo-1510425463958-dcced28da480?auto=format&fit=crop&w=1352&q=80");
}

.item-5 {
  background-image: url("https://images.unsplash.com/photo-1503602642458-232111445657?auto=format&fit=crop&w=1234&q=80");
}

.social {
  position: absolute;
  right: 35px;
  bottom: 0;
}
.social img {
  display: block;
  width: 32px;
}
</style>
</head>
<body>
  <div class="container">
  <h1>Gallery</h1>

  <div class="gallery-wrap">
    <div class="item item-1"></div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
    <div class="item item-4"></div>
    <div class="item item-5"></div>
  </div>
 </div>

<div class="social">
  <a href="https://twitter.com/StefCharle" target="_blank">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/149103/twitter.svg" alt="">
  </a>
</div>
</body>
</html>

13. By George W. Park

Made by George W. Park. Image Gallery with CSS Grid & Flexbox. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Montserrat:500);

:root {
	/* Base font size */
	font-size: 10px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	min-height: 100vh;
	background-color: #fafafa;
}

.container {
	max-width: 100rem;
	margin: 0 auto;
	padding: 0 2rem 2rem;
}

.heading {
	font-family: "Montserrat", Arial, sans-serif;
	font-size: 4rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	padding: 3.5rem 0;
	color: #1a1a1a;
}

.heading span {
	display: block;
}

.gallery {
	display: flex;
	flex-wrap: wrap;
	/* Compensate for excess margin on outer gallery flex items */
	margin: -1rem -1rem;
}

.gallery-item {
	/* Minimum width of 24rem and grow to fit available space */
	flex: 1 0 24rem;
	/* Margin value should be half of grid-gap value as margins on flex items don't collapse */
	margin: 1rem;
	box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
	overflow: hidden;
}

.gallery-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease-out;
}

.gallery-image:hover {
	transform: scale(1.15);
}

/*

The following rule will only run if your browser supports CSS grid.

Remove or comment-out the code block below to see how the browser will fall-back to flexbox styling. 

*/

@supports (display: grid) {
	.gallery {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
		grid-gap: 2rem;
	}

	.gallery,
	.gallery-item {
		margin: 0;
	}
}
</style>
</head>
<body>
  <div class="container">

	<h1 class="heading">Image Gallery with CSS Grid <span>& Flexbox Fallback</span></h1>

	<div class="gallery">

		<div class="gallery-item">
			<img class="gallery-image" src="https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?w=500&h=500&fit=crop" alt="">
		</div>

		<div class="gallery-item">
			<img class="gallery-image" src="https://images.unsplash.com/photo-1515260268569-9271009adfdb?w=500&h=500&fit=crop" alt="">
		</div>

		<div class="gallery-item">
			<img class="gallery-image" src="https://images.unsplash.com/photo-1506045412240-22980140a405?w=500&h=500&fit=crop" alt="">
		</div>

		<div class="gallery-item">
			<img class="gallery-image" src="https://images.unsplash.com/photo-1514041181368-bca62cceffcd?w=500&h=500&fit=crop" alt="">
		</div>

		<div class="gallery-item">
			<img class="gallery-image" src="https://images.unsplash.com/photo-1445810694374-0a94739e4a03?w=500&h=500&fit=crop" alt="">
		</div>

		<div class="gallery-item">
			<img class="gallery-image" src="https://images.unsplash.com/photo-1486334803289-1623f249dd1e?w=500&h=500&fit=crop" alt="">
		</div>
	</div>
</div>
</body>
</html>