Only show thumbnail shadow hover on links

diff --git a/docs/pages/thumbnail.md b/docs/pages/thumbnail.md
index ebdbe22c57c4773ee1a0412fc9cde707924e49af..cebba9867c973481ecab5259487d21d882572f37 100644 (file)
--- 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 d6b12d54e5e7e86f9646d523c381cb2f3b05bdaf..25414a16b3305967b884b74d3849d3a9007d0bdf 100644 (file)
--- 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;
+  }
 }