solid-pixel
10/30/2016 - 2:44 PM

Isometric Grid Idea

Isometric Grid Idea

styles
content_copyfile_download
<link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet" />
style.scss
content_copyfile_download
::-webkit-scrollbar { 
    display: none; 
}
body{
  background-color: black;
}
.grid-container{
  transform-style: preserve-3d;
  transform: rotateX(45deg) rotateZ(35deg) translateX(-100px);
  height: 1300px;
  overflow-x: visible;
  overflow-y: scroll;
  padding: 60px;
}
img { 
  transition: .3s all;
  height: 300px;
  width: 300px;
}
.grid-item{
  cursor: pointer;
  margin-top: 45px;
  transition: .3s all; 
  &:hover{
    overflow: visible;
    transform: translateX(-45px) translateY(-45px) scale(1.1);
    img { transform: scale(1.1); border: 1px solid black; }
  }
}
scripts
content_copyfile_download
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
script.js
content_copyfile_download
//could use JS to fake an infinite loop
isometric-grid-idea.markdown
content_copyfile_download
  • Rendered
  • Source

Isometric Grid Idea

Trying to break web conventions a little bit.

A Pen by Jake Mason on CodePen.

License.

index.html
content_copyfile_download
<body>
  <div class="row grid-container">
    <div class="columns large-3 medium-6 small-12 grid-item">
      <img src="http://placehold.it/300">
    </div>
    <div class="columns large-3 medium-6 small-12 grid-item">
      <img src="http://placehold.it/300">
    </div>
    <div class="columns large-3 medium-6 small-12 grid-item">
      <img src="http://placehold.it/300">
    </div>
    <div class="columns large-3 medium-6 small-12 grid-item">
      <img src="http://placehold.it/300">
    </div>
    <div class="columns large-3 medium-6 small-12 grid-item">
      <img src="http://placehold.it/300">
    </div>
    <div class="columns large-3 medium-6 small-12 grid-item">
      <img src="http://placehold.it/300">
    </div>
    <div class="columns large-3 medium-6 small-12 grid-item">
      <img src="http://placehold.it/300">
    </div>
    <div class="columns large-3 medium-6 small-12 grid-item">
      <img src="http://placehold.it/300">
    </div>
    <div class="columns large-3 medium-6 small-12 grid-item">
      <img src="http://placehold.it/300">
    </div>
    <div class="columns large-3 medium-6 small-12 grid-item">
      <img src="http://placehold.it/300">
    </div>
    <div class="columns large-3 medium-6 small-12 grid-item">
      <img src="http://placehold.it/300">
    </div>
    <div class="columns large-3 medium-6 small-12 grid-item">
      <img src="http://placehold.it/300">
    </div>
    <div class="columns large-3 medium-6 small-12 grid-item">
      <img src="http://placehold.it/300">
    </div>
    <div class="columns large-3 medium-6 small-12 grid-item">
      <img src="http://placehold.it/300">
    </div>
    <div class="columns large-3 medium-6 small-12 grid-item">
      <img src="http://placehold.it/300">
    </div>
    <div class="columns large-3 medium-6 small-12 grid-item">
      <img src="http://placehold.it/300">
    </div>
    <div class="columns large-3 medium-6 small-12 grid-item">
      <img src="http://placehold.it/300">
    </div>
    <div class="columns large-3 medium-6 small-12 grid-item">
      <img src="http://placehold.it/300">
    </div>
    <div class="columns large-3 medium-6 small-12 grid-item">
      <img src="http://placehold.it/300">
    </div>
    <div class="columns large-3 medium-6 small-12 grid-item">
      <img src="http://placehold.it/300">
    </div>
    <div class="columns large-3 medium-6 small-12 grid-item">
      <img src="http://placehold.it/300">
    </div>
    <div class="columns large-3 medium-6 small-12 grid-item">
      <img src="http://placehold.it/300">
    </div>
    <div class="columns large-3 medium-6 small-12 grid-item">
      <img src="http://placehold.it/300">
    </div>
    <div class="columns large-3 medium-6 small-12 grid-item">
      <img src="http://placehold.it/300">
    </div>
    <div class="columns large-3 medium-6 small-12 grid-item">
      <img src="http://placehold.it/300">
    </div>
    <div class="columns large-3 medium-6 small-12 grid-item end">
      <img src="http://placehold.it/300">
    </div>
  </div>
</body>