<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();
			}
		});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/toggleAria.js