<html>
<div id="bk-wrap">
      <div id="bk-no-blur"></div>
      <div id="bk-blur"></div>
    </div>

    <div id="bk-shadow"></div>
    <p id="logo">Coffee Shop</p>
    <a href="#" id="menu-link">
      <span class="menu-sub">Browse Our</span>
      <span class="menu-main">Menus</span>
    </a>
    <div id="menu-wrap">
      <div id="menu-inner">
        <h1 id="menu-title">Menus</h1>
        <a href="#" id="close">x</a>
        <div id="menu-cards">
          <div class="menu-card">
            <img src="http://chrisarasin.com/img/drinks.jpg" alt="drinks">
            <h3>Drinks</h3>
          </div>
          <div class="menu-card">
            <img src="http://chrisarasin.com/img/sweets.jpg" alt="drinks">
            <h3>Sweets</h3>
          </div>
          <div class="menu-card">
            <img src="http://chrisarasin.com/img/sandwiches.jpg" alt="drinks">
            <h3>Sandwiches</h3>
          </div>
        </div>
      </div>
    </div>
</html>
html {
  height: 100%;
  box-sizing: border-box;
  font-size: 10px;
  line-height: 1.5;
  color: #333;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  height: 100%;
  margin: 0;
  font-family: "Gotham Rounded", "Proxima Nova",sans-serif;
  font-weight: 400;
  color:#fff;
  letter-spacing: .1em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}
#logo {
  position: absolute;
  top:50px;
  left: 50px;
  z-index: 2100;
  font-weight: 700;
  font-size: 18px;
  margin: 0;
  letter-spacing: .125em;
  transform: translateY(0);
  transition: all .4s;
  transition-delay: .1s;
}
.menu-on #logo  {
  opacity: 0;
  transform: translateY(-20px);
}
#menu-link {
  position: absolute;
  left: 50px;
  top: 50%;
  margin-top: -25px;
  z-index: 2100;
  color: #fff;
  text-decoration: none;
  transform: translateY(0);
  transition: all .35s;
}
#menu-link:hover {
  color: #80a98a;
}
.menu-on #menu-link  {
  opacity: 0;
  transform: translateY(-20px);
}
.menu-sub {
  font-size: 14px;
  line-height: 1.2;
  display: block;
  opacity: .6;
  letter-spacing: .125em;
  font-weight: 600;
}
.menu-main {
  font-size: 40px;
  line-height: 1.2;
  display: block;
  letter-spacing: .09em;
  font-weight: 500;
}

#bk-wrap {
  width: 120%;
  height: 100%;
  background: url(http://chrisarasin.com/img/bk.jpg) no-repeat center center;
  background-size: cover;
  position: fixed;
  left:-70px;
  top:0;
  z-index: 1;
  transform:  translateX(0) scale(1);
  transition: all .5s;
}

#bk-no-blur, #bk-blur, #bk-shadow {
  width: 100%;
  height: 100%;
  background-size: cover;
  position: absolute;
  left:0;
  top:0;
  z-index: 1;
}
#bk-shadow {
  index: 1;
  position: fixed;
}
#bk-blur {
  background: url(http://chrisarasin.com/img/bk-blur.jpg) no-repeat center center;
  background-size: cover;
  opacity: 0;
  z-index: 2;
  transition: opacity .4s;
}

.menu-on #bk-wrap {
  transform:  translateX(200px) scale(1.3);
}
.menu-on #bk-blur {
  opacity: 1;
}


#bk-shadow {
  background: transparent;
  box-shadow: inset 0 0 500px 50px rgba(0, 0, 0, .75);
  z-index: 100;
}
/*.menu-on #bk-shadow  {
   box-shadow: inset 0 0 500px 50px rgba(0, 0, 0, 1);
}*/

#menu-wrap {
  position: absolute;
  left:0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  display: none;
  opacity: 0;
  transition: all .3s;
}
#menu-wrap.display {
  display: block;
}
#menu-wrap.visible {
  opacity: 1;
}
#menu-inner {
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
  padding: 0 70px;
}
#menu-title {
  font-weight: 400;
  font-size: 28px;
  padding:30px 8px;
  margin: 0;
  opacity: 0;
  transition: all .3s;
  top:10px;
  transform:   translateY(0);
  position: relative;
}
#menu-title.on {
  opacity: 1;
  transform:   translateY(-10px);
}

#close {
  font-weight: 400;
  font-size: 26px;
  color: #fff;
  text-decoration: none;
  border: 2px solid #fff;
  width: 43px;
  height: 43px;
  text-align: center;
  border-radius: 40px;
  position: absolute;
  left: 20px;
  top:40px;
  opacity: 0;
  transform:   translateY(0);
  transition: all .3s;
  line-height: 1;
  padding: 7px 0 0 3px;
}
#close:hover {
  background: rgba(255, 255, 255, .25);
}
#close.on {
  opacity: 1;
  transform:   translateY(-10px);
}
#menu-cards {
  background: transparent;
  perspective: 1000px;
}
#menu-cards:before, #menu-cards:after {
    display: table;
    content: " ";
}
 #menu-cards:after {
  clear: both;
}

.menu-card {
  width: 33.33%;
  padding: 8px;
  float: left;
  position: relative;
  opacity: 0;
  transition: all .3s;
  transform:  scale(.975);
}
.menu-card.on {
  opacity: 1;
  transform:  scale(1);
}
.menu-card:hover {
  transform: scale(1.025);
  cursor: pointer;
}

.menu-card img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}
.menu-card h3 {
  font-weight: 500;
  font-size: 17px;
  letter-spacing: .1em;
  margin: 0;
}

@media (max-width: 758px) {
  #menu-inner {
    padding: 0 20px;
  }
  .menu-on #bk-wrap {
    transform:  translateX(100px) scale(1.3);
  }
  #menu-title {
    padding-left: 55px;
  }
  .menu-card {
    padding: 4px;
  }
  .menu-card h3 {
    font-size: 14px;
  }
}

  var $menuWrap = $('#menu-wrap'),
    $body = $('body'),
    $menuTitle = $('#menu-title'),
    $close = $('#close'),
    $menuCards = $('.menu-card'),
    $menuInner = $('#menu-inner'),
    $menuLink = $('#menu-link');

  setCardHeight();
  $(window).resize(setCardHeight);

  $menuLink.on('click', function(e) {
    e.preventDefault();
    showOverlay();
  });

  $close.on('click', function(e) {
    e.preventDefault();
    hideOverlay();
  });

  function showOverlay() {
    $body.addClass('menu-on');
    $menuWrap.addClass('display').addClass('visible');
    setTimeout(function() {
      $menuTitle.addClass('on');
      $close.addClass('on');
    }, 200);
    $menuCards.each(function(i) {
      var $card = $(this);
      setTimeout(function() {
        $card.addClass('on');
      }, 200 + 50 * i);
    });
  }

  function hideOverlay() {
    $body.removeClass('menu-on');
    $menuCards.removeClass('on');
    $menuTitle.removeClass('on');
    $close.removeClass('on');
    setTimeout(function() {
      $menuWrap.removeClass('display').removeClass('visible');
    }, 350);
  }

  function setCardHeight() {
    var windowWidth = $(window).width();
    var topVal;
    if (windowWidth >= 1300) {
      topVal = ($(window).height() - 700) / 2;
    } else {
      topVal = ($(window).height() - 200 - (windowWidth / 1300 * 513)) / 2;
    }
    if (topVal < 10) {
      topVal = 10;
    }
    $menuInner.css('top', topVal);
  }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js