diff --git a/css/index.css b/css/index.css
index dea26ee..a093fa3 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1792,11 +1792,15 @@ h6, .h6-primary {
     background-color: #f9514f;
     border: 2px solid rgba(0, 0, 0, 0.25); }
 
-a:active, a:hover, a *:active, a *:hover {
-  color: #4c4c4c; }
-
-a img:active, a img:hover, a video:active, a video:hover, a figure:active, a figure:hover, a picture:active, a picture:hover {
-  opacity: 0.7; }
+a {
+  transition: color 0.3s ease; }
+  a:active, a:hover {
+    color: #7f7f7f; }
+
+a img, a video, a figure, a picture {
+  transition: opacity 0.3s ease; }
+  a img:active, a img:hover, a video:active, a video:hover, a figure:active, a figure:hover, a picture:active, a picture:hover {
+    opacity: 0.7; }
 
 figcaption, figcaption p {
   color: #9A9A9A;
diff --git a/package-lock.json b/package-lock.json
index 40e65e5..e5ffe02 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@wpmedia/news-theme-css",
-  "version": "2.0.7",
+  "version": "2.1.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index fb373d3..1d06049 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wpmedia/news-theme-css",
-  "version": "2.0.7",
+  "version": "2.1.0",
   "description": "CSS Grid Framework with Bootstrap-like conventions",
   "author": "Brent Miller",
   "license": "ISC",
diff --git a/scss/_links.scss b/scss/_links.scss
index 5d78ad9..d4da201 100644
--- a/scss/_links.scss
+++ b/scss/_links.scss
@@ -1,16 +1,18 @@
 // Links
 //
-// Provides :active and :hover  styling of links and elements inside links
+// Provides :active and :hover  styling of links
 //
 // Styleguide 9.0.0
 
-a, a *{
+a {
+  transition: color 0.3s ease;
   &:active, &:hover{
-    color: lighten($ui-primary-font-color, 20%);
+    color: lighten($ui-primary-font-color, 40%);
   }
 }
 
 a img, a video, a figure, a picture{
+  transition: opacity 0.3s ease;
   &:active, &:hover{
     opacity: 0.7;
   }
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 047aec3..d42d8a4 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -23,8 +23,9 @@
 // Styleguide 9.1.0
 
 @mixin link-color-active-hover($color-prop:$ui-primary-font-color) {
+  transition: color 0.3s ease;
   &:active, &:hover{
-    color: lighten($color-prop, 20%);
+    color: lighten($color-prop, 40%);
   }
 }
 
@@ -36,6 +37,7 @@
 // Styleguide 9.1.0
 
 @mixin svg-color-active-hover($color-prop:$ui-primary-font-color) {
+  transition: fill 0.3s ease;
   &:active svg, &:hover svg{
     fill: lighten($color-prop, 20%);
   }
diff --git a/styleguide/item-9-1.html b/styleguide/item-9-1.html
index 237ac1b..8a042c2 100644
--- a/styleguide/item-9-1.html
+++ b/styleguide/item-9-1.html
@@ -109,7 +109,7 @@ <h1 class="kss-navigation__title kss-title">News Theme CSS</h1>
             <header class="kss-section kss-section--depth-2" id="kssref-9-1">
 
             <article class="kss-section__content">
-                <p class="kss-section__source">Source: <span>_mixins.scss</span>, line <span>31</span></p>
+                <p class="kss-section__source">Source: <span>_mixins.scss</span>, line <span>32</span></p>
 
               <a class="kss-section__permalink" href="#kssref-9-1">
                 <h2 class="kss-section__item kss-section__item--depth-2">
diff --git a/styleguide/item-9.html b/styleguide/item-9.html
index 1a7ecbc..e79240f 100644
--- a/styleguide/item-9.html
+++ b/styleguide/item-9.html
@@ -132,7 +132,7 @@ <h1 class="kss-section__item kss-section__item--depth-1">
                 </h1>
               </a>
 
-                <div class="kss-section__description"><p>Provides :active and :hover  styling of links and elements inside links</p>
+                <div class="kss-section__description"><p>Provides :active and :hover  styling of links</p>
 </div>
 
             </article>
diff --git a/styleguide/section-9.html b/styleguide/section-9.html
index 9918996..ff561c5 100644
--- a/styleguide/section-9.html
+++ b/styleguide/section-9.html
@@ -132,7 +132,7 @@ <h1 class="kss-section__item kss-section__item--depth-1">
                 </h1>
               </a>
 
-                <div class="kss-section__description"><p>Provides :active and :hover  styling of links and elements inside links</p>
+                <div class="kss-section__description"><p>Provides :active and :hover  styling of links</p>
 </div>
 
             </article>
@@ -162,7 +162,7 @@ <h2 class="kss-section__item kss-section__item--depth-2">
             <section class="kss-section kss-section--depth-2" id="kssref-9-1">
 
             <article class="kss-section__content">
-                <p class="kss-section__source">Source: <span>_mixins.scss</span>, line <span>31</span></p>
+                <p class="kss-section__source">Source: <span>_mixins.scss</span>, line <span>32</span></p>
 
               <a class="kss-section__permalink" href="#kssref-9-1">
                 <h2 class="kss-section__item kss-section__item--depth-2">