Skip to content

Instantly share code, notes, and snippets.

@solid-pixel

solid-pixel/index.html

Created October 30, 2016 14:44
Show Gist options
  • Save solid-pixel/5949cf2ec36e5b4d4409b17008a5ab54 to your computer and use it in GitHub Desktop.
Save solid-pixel/5949cf2ec36e5b4d4409b17008a5ab54 to your computer and use it in GitHub Desktop.
Download ZIP
Isometric Grid Idea
Raw
index.html
<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>
Raw
isometric-grid-idea.markdown
Raw
script.js
//could use JS to fake an infinite loop
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
Raw
style.scss
::-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; }
}
}
Raw
styles
<link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment