CodePen Embed - Accessible off-canvas grid gallery

<main role="main" id="main">

  <section class="tiles-a">
    <ul>
      
      <li>
        <a href="#" style="background: url('https://unsplash.it/600/600?image=120'); background-size: cover;" aria-controls="aside" aria-expanded="false">
          <div class="details visually-hidden">
            <img src="https://unsplash.it/1900/800?image=120" alt="Starry Night">
            <div class="text-copy wrapper">
              <h3>Name Here</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex porro tempore, rerum ullam quae rem tenetur officiis eveniet voluptate reprehenderit quibusdam maiores nihil nam, sequi molestias explicabo non quos. Deserunt.</p>
            </div>
          </div>
        </a>
      </li>
      
      <li>
        <a href="#" style="background: url('https://unsplash.it/600/600?image=640'); background-size: cover;" aria-controls="aside" aria-expanded="false">
          <div class="details visually-hidden">
            <img src="https://unsplash.it/1900/800?image=640" alt="Ocean beach">
            <div class="text-copy wrapper">
              <h3>Cool Title Here</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex porro tempore, rerum ullam quae rem tenetur officiis eveniet voluptate reprehenderit quibusdam maiores nihil nam, sequi molestias explicabo non quos. Deserunt.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex porro tempore, rerum ullam quae rem tenetur officiis eveniet voluptate reprehenderit quibusdam maiores nihil nam, sequi molestias explicabo non quos. Deserunt.</p>
            </div>
          </div>
        </a>
      </li>
      
      <li>
        <a href="#" style="background: url('https://unsplash.it/600/600?image=238'); background-size: cover;" aria-controls="aside" aria-expanded="false">
          <div class="details visually-hidden">
            <img src="https://unsplash.it/1900/800?image=238" alt="Manhattan">
            <div class="text-copy wrapper">
              <h3>Cool Title Here</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex porro tempore, rerum ullam quae rem tenetur officiis eveniet voluptate reprehenderit quibusdam maiores nihil nam, sequi molestias explicabo non quos. Deserunt.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex porro tempore, rerum ullam quae rem tenetur officiis eveniet voluptate reprehenderit quibusdam maiores nihil nam, sequi molestias explicabo non quos. Deserunt.</p>
            </div>
          </div>
        </a>
      </li>
      
      <li>
        <a href="#" style="background: url('https://unsplash.it/600/600?image=206'); background-size: cover;" aria-controls="aside" aria-expanded="false">
          <div class="details visually-hidden">
            <img src="https://unsplash.it/1900/800?image=206" alt="Large bridge">
            <div class="text-copy wrapper">
              <h3>Cool Title Here</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex porro tempore, rerum ullam quae rem tenetur officiis eveniet voluptate reprehenderit quibusdam maiores nihil nam, sequi molestias explicabo non quos. Deserunt.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex porro tempore, rerum ullam quae rem tenetur officiis eveniet voluptate reprehenderit quibusdam maiores nihil nam, sequi molestias explicabo non quos. Deserunt.</p>
            </div>
          </div>
        </a>
      </li>
      
      <li>
        <a href="#" style="background: url('https://unsplash.it/600/600?image=134'); background-size: cover;" aria-controls="aside" aria-expanded="false">
          <div class="details visually-hidden">
            <img src="https://unsplash.it/1900/800?image=134" alt="Large bridge">
            <div class="text-copy wrapper">
              <h3>Cool Title Here</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex porro tempore, rerum ullam quae rem tenetur officiis eveniet voluptate reprehenderit quibusdam maiores nihil nam, sequi molestias explicabo non quos. Deserunt.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex porro tempore, rerum ullam quae rem tenetur officiis eveniet voluptate reprehenderit quibusdam maiores nihil nam, sequi molestias explicabo non quos. Deserunt.</p>
            </div>
          </div>
        </a>
      </li>
      
      <li>
        <a href="#" style="background: url('https://unsplash.it/600/600?image=200'); background-size: cover;" aria-controls="aside" aria-expanded="false">
          <div class="details visually-hidden">
            <img src="https://unsplash.it/1900/800?image=200" alt="Goat-like animal">
            <div class="text-copy wrapper">
              <h3>Cool Title Here</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex porro tempore, rerum ullam quae rem tenetur officiis eveniet voluptate reprehenderit quibusdam maiores nihil nam, sequi molestias explicabo non quos. Deserunt.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex porro tempore, rerum ullam quae rem tenetur officiis eveniet voluptate reprehenderit quibusdam maiores nihil nam, sequi molestias explicabo non quos. Deserunt.</p>
            </div>
          </div>
        </a>
      </li>
      
      <li>
        <a href="#" style="background: url('https://unsplash.it/600/600?image=120'); background-size: cover;" aria-controls="aside" aria-expanded="false">
          <div class="details visually-hidden">
            <img src="https://unsplash.it/1900/800?image=120" alt="Starry Night">
            <div class="text-copy wrapper">
              <h3>Name Here</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex porro tempore, rerum ullam quae rem tenetur officiis eveniet voluptate reprehenderit quibusdam maiores nihil nam, sequi molestias explicabo non quos. Deserunt.</p>
            </div>
          </div>
        </a>
      </li>
      
      <li>
        <a href="#" style="background: url('https://unsplash.it/600/600?image=640'); background-size: cover;" aria-controls="aside" aria-expanded="false">
          <div class="details visually-hidden">
            <img src="https://unsplash.it/1900/800?image=640" alt="Ocean beach">
            <div class="text-copy wrapper">
              <h3>Cool Title Here</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex porro tempore, rerum ullam quae rem tenetur officiis eveniet voluptate reprehenderit quibusdam maiores nihil nam, sequi molestias explicabo non quos. Deserunt.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex porro tempore, rerum ullam quae rem tenetur officiis eveniet voluptate reprehenderit quibusdam maiores nihil nam, sequi molestias explicabo non quos. Deserunt.</p>
            </div>
          </div>
        </a>
      </li>
      
      <li>
        <a href="#" style="background: url('https://unsplash.it/600/600?image=238'); background-size: cover;" aria-controls="aside" aria-expanded="false">
          <div class="details visually-hidden">
            <img src="https://unsplash.it/1900/800?image=238" alt="Manhattan">
            <div class="text-copy wrapper">
              <h3>Cool Title Here</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex porro tempore, rerum ullam quae rem tenetur officiis eveniet voluptate reprehenderit quibusdam maiores nihil nam, sequi molestias explicabo non quos. Deserunt.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex porro tempore, rerum ullam quae rem tenetur officiis eveniet voluptate reprehenderit quibusdam maiores nihil nam, sequi molestias explicabo non quos. Deserunt.</p>
            </div>
          </div>
        </a>
      </li>
      
      <li>
        <a href="#" style="background: url('https://unsplash.it/600/600?image=206'); background-size: cover;" aria-controls="aside" aria-expanded="false">
          <div class="details visually-hidden">
            <img src="https://unsplash.it/1900/800?image=206" alt="Large bridge">
            <div class="text-copy wrapper">
              <h3>Cool Title Here</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex porro tempore, rerum ullam quae rem tenetur officiis eveniet voluptate reprehenderit quibusdam maiores nihil nam, sequi molestias explicabo non quos. Deserunt.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex porro tempore, rerum ullam quae rem tenetur officiis eveniet voluptate reprehenderit quibusdam maiores nihil nam, sequi molestias explicabo non quos. Deserunt.</p>
            </div>
          </div>
        </a>
      </li>
      
      <li>
        <a href="#" style="background: url('https://unsplash.it/600/600?image=134'); background-size: cover;" aria-controls="aside" aria-expanded="false">
          <div class="details visually-hidden">
            <img src="https://unsplash.it/1900/800?image=134" alt="Large bridge">
            <div class="text-copy wrapper">
              <h3>Cool Title Here</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex porro tempore, rerum ullam quae rem tenetur officiis eveniet voluptate reprehenderit quibusdam maiores nihil nam, sequi molestias explicabo non quos. Deserunt.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex porro tempore, rerum ullam quae rem tenetur officiis eveniet voluptate reprehenderit quibusdam maiores nihil nam, sequi molestias explicabo non quos. Deserunt.</p>
            </div>
          </div>
        </a>
      </li>
      
      <li>
        <a href="#" style="background: url('https://unsplash.it/600/600?image=200'); background-size: cover;" aria-controls="aside" aria-expanded="false">
          <div class="details visually-hidden">
            <img src="https://unsplash.it/1900/800?image=200" alt="Goat-like animal">
            <div class="text-copy wrapper">
              <h3>Cool Title Here</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex porro tempore, rerum ullam quae rem tenetur officiis eveniet voluptate reprehenderit quibusdam maiores nihil nam, sequi molestias explicabo non quos. Deserunt.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex porro tempore, rerum ullam quae rem tenetur officiis eveniet voluptate reprehenderit quibusdam maiores nihil nam, sequi molestias explicabo non quos. Deserunt.</p>
            </div>
          </div>
        </a>
      </li>
      
    </ul>
  </section>

</main>

<aside role="complementary" id="aside" aria-hidden="true" aria-expanded="false">
  <a href="#" class="close"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/close-white-thin.svg" alt="Close button"><span class="visually-hidden">Return to main content</span></a>
  <div class="aside--details" tabindex="0" aria-live="polite" aria-atomic="true" aria-label="Image details">
    
  </div>
</aside>

* { box-sizing: boder-box; }

$keyBreakpoint: 640px;

body {
  margin: 0;
}

#main {
  position: relative;
  z-index: 20;
  background: #fff;
  transition: transform .6s ease;
  @media(min-width: $keyBreakpoint){
    padding: 1em;
  }
}

.fake-section {
  background: #eee;
  height: 300px;
}

.tiles-a {
  
  width: 100%;
  position: relative;
  overflow: hidden;
  
  // reset
  ul { margin: 0; padding: 0; }
  li { list-style: none; }
  
  li {
    @media(min-width: $keyBreakpoint){
      float: left;
      width: 33.33%;
    }
  }
  
  a {
    margin: 1em;
    display: block;
    background: #222;
    padding-top: 73%;
    height: 0;
  }
  
  .details {
    
  }
  
} // .tiles-a

#aside {
  position: fixed;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  background: #eee;
  overflow-y: scroll;
  z-index: 10;
  img {
    width: 100%;
    height: auto;
    vertical-align: top;
  }
  .wrapper {
    padding: 1em;
  }
  .close {
    width: 25px;
    display: block;
    position: absolute;
    top: 1em;
    right: 1em;
    background-color: rgba(0,0,0,.5);
  border-radius: 50%;
  }
}

.show-detail {
  overflow: hidden;
  #main { transform: translateX(-60%); }
}

.visually-hidden { 
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0; 
}

View Compiled

var $parent = $("#main"),
    $aside = $("#aside"),
    $asideTarget = $aside.find(".aside--details"),
    $asideClose = $aside.find(".close"),
    $tilesParent = $(".tiles-a"),
    $tiles = $tilesParent.find("a"),
    slideClass = "show-detail";

    // tile click
    $tiles.on("click", function(e){
      e.preventDefault();
      e.stopPropagation();
      if(!$("html").hasClass(slideClass)){
        $tiles.removeClass("active");
        $(this).addClass("active");
        $(this).attr("aria-expanded","true");
        loadTileData($(this));
      }else{
        killAside();
        $(this).attr("aria-expanded","false");
      }
    });

    // kill aside
    $asideClose.on("click", function(e){
      e.preventDefault();
      killAside();
    });

    // load data to aside
    function loadTileData(target){
      var $this = $(target),
          itemHtml = $this.find(".details").html();
          $asideTarget.html(itemHtml);
          showAside();
    }

    // show/hide aside
    function showAside(){
      if(!$("html").hasClass(slideClass)){
        $("html").toggleClass(slideClass);
        $aside.attr("aria-hidden","false");
        focusCloseButton();
      }
    }
    
    // handle esc key
    window.addEventListener("keyup", function(e){

      // grab key pressed
      var code = (e.keyCode ? e.keyCode : e.which);
      
      // escape
      if(code === 27){
        killAside();
      }

    }, false);

    // kill aside
    function killAside(){
      if($("html").hasClass(slideClass)){
        $("html").removeClass(slideClass);
        sendFocusBack();
        $aside.attr("aria-hidden","true");
        $tiles.attr("aria-expanded","false");
      }
    }

    // send focus to close button
    function focusCloseButton(){
      $asideClose.focus();  
    }

    // send focus back to item that triggered event
    function sendFocusBack(){
      $(".active").focus();
    }

    // handle body click to close off-canvas
    $parent.on("click",function(e){
      if($("html").hasClass(slideClass)){
        killAside();
      }
    });

This Pen is owned by Joe Watkins on CodePen.

See more by @joe-watkins on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript