Isometric Layout

In this example below you will see how to do a Isometric Layout with some HTML / CSS and Javascript

Classin' up a basic grid with an isometric / puesdo-3D style layout and rotated scroll. Inspiration: work section on http://letters-inc.jp/

Thumbnail
This awesome code was written by austinmayer, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright austinmayer ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Isometric Layout</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="container">
  <ul>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
    <li><a href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21693/low_poly_valley_by_rmartone-d5hxl72.jpg"/>
        <!--.title //h2 nicholas cage
        -->
        <div class="shadow"></div>
        <div class="underlay"></div></a></li>
  </ul>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/austinmayer/isometric-layout-JAtpv */
body {
  overflow: hidden;
}

img {
  max-width: 100%;
}

.container, ul {
  height: 1600px;
  width: 1600px;
  margin: -200px 0 0 -250px;
}

.container {
  overflow: hidden;
  -webkit-transform-style: presever-3d;
  -moz-transform-style: presever-3d;
  -ms-transform-style: presever-3d;
  -o-transform-style: presever-3d;
  transform-style: presever-3d;
  -webkit-transform: rotate(35deg);
  -moz-transform: rotate(35deg);
  -ms-transform: rotate(35deg);
  -o-transform: rotate(35deg);
  transform: rotate(35deg);
}

ul {
  list-style: none;
  position: absolute;
  top: -200px;
  padding: 550px 5em;
  overflow: auto;
}
ul li {
  display: inline-block;
  height: 200px;
  width: 300px;
  padding: 0 1% 1%;
  perspective: 1600px;
  padding: 1em;
  border: 1px solid black;
  -webkit-transform-style: presever-3d;
  -moz-transform-style: presever-3d;
  -ms-transform-style: presever-3d;
  -o-transform-style: presever-3d;
  transform-style: presever-3d;
  -webkit-transform: rotateX(-45deg) rotateZ(-45deg);
  -moz-transform: rotateX(-45deg) rotateZ(-45deg);
  -ms-transform: rotateX(-45deg) rotateZ(-45deg);
  -o-transform: rotateX(-45deg) rotateZ(-45deg);
  transform: rotateX(-45deg) rotateZ(-45deg);
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
}
ul li a {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
}
ul li a .title, ul li a img, ul li a .underlay, ul li a .shadow {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  transition: 0.3s;
}
ul li a .title {
  z-index: 125;
  text-align: center;
  background: white;
  color: black;
  border: 1px solid black;
  vertical-align: center;
}
ul li a .title h2 {
  padding-top: 2.5em;
  text-transform: uppercase;
}
ul li a .shadow {
  background: rgba(0, 0, 0, 0.3);
  z-index: 100;
}
ul li a img {
  z-index: 50;
}
ul li a .underlay {
  background: #75D3BA;
  -webkit-transform: translate(-40px, 60px);
  -moz-transform: translate(-40px, 60px);
  -ms-transform: translate(-40px, 60px);
  -o-transform: translate(-40px, 60px);
  transform: translate(-40px, 60px);
  z-index: 25;
}
ul li:hover .title {
  -webkit-transform: translate(40px, -65px);
  -moz-transform: translate(40px, -65px);
  -ms-transform: translate(40px, -65px);
  -o-transform: translate(40px, -65px);
  transform: translate(40px, -65px);
}
ul li:hover .shadow {
  background: rgba(0, 0, 0, 0.1);
  -webkit-transform: translate(20px, -35px);
  -moz-transform: translate(20px, -35px);
  -ms-transform: translate(20px, -35px);
  -o-transform: translate(20px, -35px);
  transform: translate(20px, -35px);
}

Comments