Parallax Thumbnails

DevTips · May 1, 2015 · bc269dc · bc269dc
1 parent adf1206
commit bc269dc
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 68 deletions.
diff --git a/css/layout1.sass b/css/layout1.sass
@@ -73,18 +73,43 @@ img
 // Model Grid
 
 .clothes-pics
+  margin-bottom: 100px
 
   figure
     margin-bottom: 20px
     position: relative
     opacity: 0
     transform: translateX(20px)
     transition: all 0.3s ease-in-out
+    overflow: hidden
+    cursor: pointer
 
     &.is-showing
       opacity: 1
       transform: translateX(0px)
 
+    img
+      display: block
+      transform: scale(1)
+      transition: all 0.3s ease-in-out
+
+    &:hover
+      figcaption
+        left: 0%
+
+      img
+        transform: scale(1.1)
+
+  figcaption
+    position: absolute
+    bottom: 10px
+    left: -100%
+    background: black
+    color: white
+    padding: 2px 8px
+    font-size: 11px
+    transition: all 0.3s ease-in-out
+
 
 
 // large-window

diff --git a/css/style.css b/css/style.css
@@ -915,15 +915,36 @@ img {
   left: 50%;
   margin-left: -480px; }
 
-.clothes-pics figure {
-  margin-bottom: 20px;
-  position: relative;
-  opacity: 0;
-  transform: translateX(20px);
-  transition: all 0.3s ease-in-out; }
-  .clothes-pics figure.is-showing {
-    opacity: 1;
-    transform: translateX(0px); }
+.clothes-pics {
+  margin-bottom: 100px; }
+  .clothes-pics figure {
+    margin-bottom: 20px;
+    position: relative;
+    opacity: 0;
+    transform: translateX(20px);
+    transition: all 0.3s ease-in-out;
+    overflow: hidden;
+    cursor: pointer; }
+    .clothes-pics figure.is-showing {
+      opacity: 1;
+      transform: translateX(0px); }
+    .clothes-pics figure img {
+      display: block;
+      transform: scale(1);
+      transition: all 0.3s ease-in-out; }
+    .clothes-pics figure:hover figcaption {
+      left: 0%; }
+    .clothes-pics figure:hover img {
+      transform: scale(1.1); }
+  .clothes-pics figcaption {
+    position: absolute;
+    bottom: 10px;
+    left: -100%;
+    background: black;
+    color: white;
+    padding: 2px 8px;
+    font-size: 11px;
+    transition: all 0.3s ease-in-out; }
 
 .large-window {
   height: 640px;

diff --git a/index.html b/index.html
@@ -23,19 +23,37 @@ <h1>Clothing Store</h1>
         <hr>
         <div class="clothes-pics">
           <div class="row img-row">
-            <figure class="columns four"><img src="/images/model1.jpg"></figure>
-            <figure class="columns four"><img src="/images/model2.jpg"></figure>
-            <figure class="columns four"><img src="/images/model3.jpg"></figure>
+            <figure class="columns four"><img src="/images/model1.jpg">
+              <figcaption>BlackBird Sweater - <strong>$135</strong></figcaption>
+            </figure>
+            <figure class="columns four"><img src="/images/model2.jpg">
+              <figcaption>BlackBird Trousers - <strong>$135</strong></figcaption>
+            </figure>
+            <figure class="columns four"><img src="/images/model3.jpg">
+              <figcaption>BlackBird Jacket - <strong>$135</strong></figcaption>
+            </figure>
           </div>
           <div class="row img-row">
-            <figure class="columns four"><img src="/images/model2.jpg"></figure>
-            <figure class="columns four"><img src="/images/model3.jpg"></figure>
-            <figure class="columns four"><img src="/images/model1.jpg"></figure>
+            <figure class="columns four"><img src="/images/model2.jpg">
+              <figcaption>BlackBird Trousers - <strong>$135</strong></figcaption>
+            </figure>
+            <figure class="columns four"><img src="/images/model3.jpg">
+              <figcaption>BlackBird Jacket - <strong>$135</strong></figcaption>
+            </figure>
+            <figure class="columns four"><img src="/images/model1.jpg">
+              <figcaption>BlackBird Sweater - <strong>$135</strong></figcaption>
+            </figure>
           </div>
           <div class="row img-row">
-            <figure class="columns four"><img src="/images/model3.jpg"></figure>
-            <figure class="columns four"><img src="/images/model1.jpg"></figure>
-            <figure class="columns four"><img src="/images/model2.jpg"></figure>
+            <figure class="columns four"><img src="/images/model3.jpg">
+              <figcaption>BlackBird Jacket - <strong>$135</strong></figcaption>
+            </figure>
+            <figure class="columns four"><img src="/images/model1.jpg">
+              <figcaption>BlackBird Sweater - <strong>$135</strong></figcaption>
+            </figure>
+            <figure class="columns four"><img src="/images/model2.jpg">
+              <figcaption>BlackBird Trousers - <strong>$135</strong></figcaption>
+            </figure>
           </div>
         </div>
         <h1>Clothing Store</h1>

diff --git a/index.jade b/index.jade
@@ -34,33 +34,42 @@ html(lang="en")
           .row.img-row
             figure.columns.four
               img(src="/images/model1.jpg")
+              figcaption BlackBird Sweater - <strong>$135</strong>
 
             figure.columns.four
               img(src="/images/model2.jpg")
+              figcaption BlackBird Trousers - <strong>$135</strong>
 
             figure.columns.four
               img(src="/images/model3.jpg")
+              figcaption BlackBird Jacket - <strong>$135</strong>
 
           .row.img-row
             figure.columns.four
               img(src="/images/model2.jpg")
+              figcaption BlackBird Trousers - <strong>$135</strong>
 
             figure.columns.four
               img(src="/images/model3.jpg")
+              figcaption BlackBird Jacket - <strong>$135</strong>
 
             figure.columns.four
               img(src="/images/model1.jpg")
+              figcaption BlackBird Sweater - <strong>$135</strong>
 
           .row.img-row
             figure.columns.four
               img(src="/images/model3.jpg")
+              figcaption BlackBird Jacket - <strong>$135</strong>
 
             figure.columns.four
               img(src="/images/model1.jpg")
+              figcaption BlackBird Sweater - <strong>$135</strong>
 
             figure.columns.four
               img(src="/images/model2.jpg")
-
+              figcaption BlackBird Trousers - <strong>$135</strong>
+
 
         h1 Clothing Store
 

diff --git a/js/min/functions-min.js b/js/min/functions-min.js
diff --git a/readme.html b/readme.html
diff --git a/readme.md b/readme.md
@@ -38,6 +38,14 @@ Releases correspond to the videos. Visit the releases page on this repo to find
 - Grab the code we wrote in this video. [Get the code](https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.3).
 
 
+
+## Video 5 - "Parallax Thumbnails"
+
+<a href="https://youtu.be/KzP7YXcHNcE"><img src="https://i.ytimg.com/vi/KzP7YXcHNcE/mqdefault.jpg"><br>Watch on YouTube</a>
+
+- Grab the code we wrote in this video. [Get the code](https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.4).
+
+
 ---