Pure CSS3 image gallery with Flexbox (responsive)

index.jade

h1 Pure CSS3 image gallery

section.container
  - var i = 0
  while i < 22
    if i % 4 == 0
      h2 TITLE #{i}
    else
      figure
        img(src="//dummyimage.com/600x400/888/fff.png")
        figcaption
          h3 title #{i}
          a.view(href="#") view
          a.download(href="#") download
    - i++

Pure CSS3 image gallery with Flexbox (responsive).markdown

Pure CSS3 image gallery with Flexbox (responsive)

A Pen by SENDA Keijiro (千田啓次郎) on CodePen.

License.

script.js

# I used `object-fit` attribute, but iOS 8 Safari does not suppport it yet.
# May 'anselmh/object-fit' help you.
# https://github.com/anselmh/object-fit

style.sass

@import "compass"

//*********************
// variables
//*********************
$animation_time: .3s

//*********************
// BREAKPOINTS
// https://responsivedesign.is/develop/getting-started-with-sass
//*********************
@mixin breakpoint($point)
  @if $point == desktop
    @media (min-width: 70em)
      @content
  @else if $point == laptop
    @media (min-width: 64em)
      @content
  @else if $point == tablet
    @media (min-width: 50em)
      @content
  @else if $point == phablet
    @media (min-width: 37.5em) 
      @content
  @else if $point == mobileonly
    @media (max-width: 37.5em) 
      @content

body
  +breakpoint(mobileonly)
    background: #f00

figure
  flex: 1 1 25%  // even `0 1 25%` will fit your demand
  +breakpoint(mobileonly)
    flex-basis: 50%

//*********************
// other styles
//*********************
*
  margin: 0
  padding: 0

body
  max-width: 80rem
  margin: auto

h1
  text-align: center
  padding: 2em
  color: #BFD833

.container
  // background: #ccc
  display: flex
  flex-flow: row
  flex-wrap: wrap
  
  h2
    color: #fff
    font-size: 2rem
    flex-basis: 50%
    display: flex
    background: #BBE261
    +justify-content(center)
    +align-content(center)
    +align-items(center)
  
  figure
    overflow: hidden
    position: relative
    
    //flex: 1 1 25%
    box-sizing: border-box
    height: 12rem
    
    &.wide
      background: #ccc
      flex-basis: 50%

    img
      // fill image inside box
      width: 100%
      height: 12rem
      object-position: 50% 50%
      object-fit: cover
      z-index: 1
  
    figcaption
      color: #fff
      position: absolute
      top: 0
      right: 0
      bottom: 0
      left: 0
      padding: 1rem
      +transform(translateY(100%))
      +transition(transform $animation_time ease-in-out)
        
      h3
        font-size: 3rem
      
      a
        color: #fff
        text-decoration: none
        display: block
        float: left
        font-size: 1.5rem
        margin: 1rem 1rem 0 0
        +transition(all $animation_time)
      a:hover
        color: #E3FF00
      a.view:before
        content: "\f06e"
        font-family: FontAwesome
      a.download:before
        content: "\f019"
        font-family: FontAwesome

    &:hover figcaption
      +transform(translateY(0))

    // overlay layer
    &::before
      content: ' '
      position: absolute
      top: 0
      right: 0
      bottom: 0
      left: 0
      background: transparent
      +transition(background $animation_time ease-out)
    &:hover::before
      background: rgba(0, 0, 0, .75)

    &:nth-child(3n-2)
      background: #f33
    &:nth-child(3n-1)
      background: #3f3
    &:nth-child(3n)
      background: #33f

styles

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />

Hey, I've used your gist code on my site, hope that's OK? Thanks!