studio - soft landing: added in hover/active states for elements

cms/static/sass/_index.scss

@@ -143,14 +143,50 @@
           margin-right: flex-gutter();
 
           a {
+            @include box-sizing(border-box);
+            @include box-shadow(0 1px ($baseline/10) $shadow-l1);
+            position: relative;
+            top: 0;
             display: block;
+            border: 1px solid $gray-l3;
+            padding: ($baseline/4);
+            background: $white;
+
+            .action-zoom {
+              @include transition(opacity .15s ease-in-out);
+              opacity: 0;
+              position: absolute;
+              left: 110px;
+              top: 110px;
+              min-height: 300px;
+              min-width: 300px;
+
+              .ss-icon {
+                @include font-size(32);
+                @include border-radius(($baseline));
+                display: inline-block;
+                padding: ($baseline*1.5) $baseline $baseline $baseline;
+                background: $blue;
+                color: $white;
+                text-align: center;
+                line-height: 2.75rem;
+              }
+            }
+
+            &:hover {
+              border-color: $blue;
+              top: -($baseline/5);
+
+              .action-zoom {
+                opacity: 0.8;
+              }
+            }
           }
 
           img {
             display: block;
             width: 100%;
             height: 100%;
-            background: $black;
           }
         }
 
@@ -181,10 +217,16 @@
             margin: ($baseline*1.5) 0 0 0;
 
             .proofpoint {
+              @include box-sizing(border-box);
+              @include border-radius(($baseline/4));
               @include transition(color .15s ease-in-out);
+              position: relative;
+              top: 0;
               float: left;
               width: flex-grid(3, 9);
+              min-height: ($baseline*8);
               margin-right: flex-gutter();
+              padding: ($baseline*0.75) $baseline;
               color: $gray-l1;
               cursor: pointer;
 
@@ -196,7 +238,13 @@
               }
 
               &:hover {
-                color: $gray-d3;
+                background: $blue-l5;
+                color: $blue-l2;
+                top: -($baseline/5);
+
+                .title {
+                  color: $blue-d1;
+                }
               }
 
               &:last-child {

cms/templates/howitworks.html

@@ -25,8 +25,11 @@
       <li class="feature">
         <figure class="img zoom">
           <a href="/static/img/howitworks-feature1.png">
-            <img src="/static/img/pl-1x1-000.png" alt="Studio Helps You Keep Your Courses Organized" />
+            <img src="/static/img/thumb-hiw-feature1.png" alt="Studio Helps You Keep Your Courses Organized" />
             <figcaption class="sr">Studio Helps You Keep Your Courses Organized</figcaption>
+            <span class="action-zoom">
+              <i class="ss-icon ss-symbolicons-block">&#xE002;</i>
+            </span>
           </a>
         </figure>
 
@@ -56,8 +59,11 @@
       <li class="feature">
         <figure class="img zoom">
         <a href="/static/img/howitworks-feature2.png">
-          <img src="/static/img/pl-1x1-000.png" alt="Studio Keeps Your Learning Sequences and Lectures, Together" />
+          <img src="/static/img/thumb-hiw-feature1.png" alt="Studio Keeps Your Learning Sequences and Lectures, Together" />
           <figcaption class="sr">Studio Keeps Your Learning Sequences and Lectures, Together</figcaption>
+          <span class="action-zoom">
+            <i class="ss-icon ss-symbolicons-block">&#xE002;</i>
+          </span>
         </a>
         </figure>
 
@@ -86,9 +92,12 @@
 
       <li class="feature">
         <figure class="img zoom">
-          <a href="/static/img/howitworks-feature3.png">
-            <img src="/static/img/pl-1x1-000.png" alt="Studio Gives You Simple, Fast, and Incremental Publishing. With Friends." />
+          <a href="/static/img/thumb-hiw-feature3.png">
+            <img src="/static/img/thumb-hiw-feature1.png" alt="Studio Gives You Simple, Fast, and Incremental Publishing. With Friends." />
             <figcaption class="sr">Studio Gives You Simple, Fast, and Incremental Publishing. With Friends.</figcaption>
+            <span class="action-zoom">
+              <i class="ss-icon ss-symbolicons-block">&#xE002;</i>
+            </span>
           </a>
         </figure>