From e1a68ffc8a305371530c95329d075eaeafea5ff6 Mon Sep 17 00:00:00 2001
From: Andy Cochran <acochran@council.nyc.gov>
Date: Wed, 27 Apr 2016 17:55:57 -0400
Subject: [PATCH] Only show thumbnail shadow hover on links

---
 docs/pages/thumbnail.md         |  8 ++++++--
 scss/components/_thumbnail.scss | 10 +++++++++-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/docs/pages/thumbnail.md b/docs/pages/thumbnail.md
index ebdbe22c5..cebba9867 100644
--- a/docs/pages/thumbnail.md
+++ b/docs/pages/thumbnail.md
@@ -7,7 +7,11 @@ sass: scss/components/_thumbnail.scss
 The `.thumbnail` class can be applied directly to an `<img>` element, or an `<a>` that wraps it. Make sure the `<img>` has an `alt` attribute that describes the contents of the image.
 
 ```html
-<img class="thumbnail" src="assets/img/thumbnail/01.jpg" alt="Photo of Uranus.">
+<img class="thumbnail" src="thumbnail.jpg" alt="Photo of Uranus.">
+```
+
+```html
+<a href="#" class="thumbnail"><img src="thumbnail.jpg" alt="Photo of Neptune."></a>
 ```
 
 <div class="row">
@@ -15,7 +19,7 @@ The `.thumbnail` class can be applied directly to an `<img>` element, or an `<a>
     <img class="thumbnail" src="assets/img/thumbnail/01.jpg" alt="Photo of Uranus.">
   </div>
   <div class="small-4 columns">
-    <img class="thumbnail" src="assets/img/thumbnail/02.jpg" alt="Photo of Neptune.">
+    <a href="#" class="thumbnail"><img src="assets/img/thumbnail/02.jpg" alt="Photo of Neptune."></a>
   </div>
   <div class="small-4 columns">
     <img class="thumbnail" src="assets/img/thumbnail/03.jpg" alt="Photo of Pluto.">
diff --git a/scss/components/_thumbnail.scss b/scss/components/_thumbnail.scss
index d6b12d54e..25414a16b 100644
--- a/scss/components/_thumbnail.scss
+++ b/scss/components/_thumbnail.scss
@@ -37,18 +37,26 @@ $thumbnail-radius: $global-radius !default;
   display: inline-block;
   line-height: 0;
   max-width: 100%;
-  transition: $thumbnail-transition;
   border-radius: $thumbnail-radius;
   margin-bottom: $thumbnail-margin-bottom;
+}
 
+@mixin thumbnail-link {
+  transition: $thumbnail-transition;
   &:hover,
   &:focus {
     box-shadow: $thumbnail-shadow-hover;
   }
+  image {
+    box-shadow: none;
+  }
 }
 
 @mixin foundation-thumbnail {
   .thumbnail {
     @include thumbnail;
   }
+  a.thumbnail {
+    @include thumbnail-link;
+  }
 }
-- 
2.47.2