Update the docs to include the grow effect

Author: mrmrs

docs/themes/hovers/index.html

@@ -74,21 +74,17 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-hovers</h4>
           </dl>
         </div>
         <p class="measure f3 lh-copy">
-          There are two classes for adding hover effects to elements. One dims
-          an element on hover, the other will hide children within an element on hover.
-          The dim class can be used on links of any color to give visual affordance to
-          users that something can be interacted with.
+          There are several classes for adding hover effects to elements.
+          Hover effects can be used to give visual affordance to the user that an element can be interacted with.
         </p>
       </article>
       <div class="ph3 ph5-ns pt4 pb5">
         <h2 class="f3 bold">Examples</h2>
         <h3 class="f5 book pt4 caps">Dim Text</h3>
         <p>
           <a href="#" class="f3 b db dim link pv1 black">This link will dim on hover</a>
-          <a href="#" class="f3 b db dim link pv1 gray">This link will dim on hover</a>
-          <a href="#" class="f3 b db dim link pv1 blue">This link will dim on hover</a>
-          <a href="#" class="f3 b db dim link pv1 dark-blue">This link will dim on hover</a>
-          <a href="#" class="f3 b db dim link pv1 darkest-blue">This link will dim on hover</a>
+          <a href="#" class="f3 b db dim link pv1 black-80">This link will dim on hover</a>
+          <a href="#" class="f3 b db dim link pv1 black-60">This link will dim on hover</a>
         </p>
         <h3 class="f5 book pt4 caps">Dim Card</h3>
         <p>
@@ -105,6 +101,12 @@ <h3 class="f5 book pt4 caps">Add pointer on hover</h3>
           <div href="#" class="link dim black mw5 dt hide-child ba b--black-20 pa4 br2 pointer">
               Add pointer on hover to element.
           </div>
+        <h3 class="f5 book pt4 caps">Grow on Hover</h3>
+        <a class="w5 mw5 dt grow link" href="#" style="background: black url(/img/1.jpg); background-size: cover;">
+          <span class="white-90 underline f5 f3-ns b ttu dtc v-mid w-100 h-100 pa3 pa5-ns br2">
+            Portfolio Project #11
+          </span>
+        </a>
         <div class="mt5 cf">
           <div class="dib mr4">
             <h1 class="f4 ttu tracked fw6">Previous</h1>

src/templates/docs/hovers/index.html

@@ -33,21 +33,17 @@ <h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
           </dl>
         </div>
         <p class="measure f3 lh-copy">
-          There are two classes for adding hover effects to elements. One dims
-          an element on hover, the other will hide children within an element on hover.
-          The dim class can be used on links of any color to give visual affordance to
-          users that something can be interacted with.
+          There are several classes for adding hover effects to elements.
+          Hover effects can be used to give visual affordance to the user that an element can be interacted with.
         </p>
       </article>
       <div class="ph3 ph5-ns pt4 pb5">
         <h2 class="f3 bold">Examples</h2>
         <h3 class="f5 book pt4 caps">Dim Text</h3>
         <p>
           <a href="#" class="f3 b db dim link pv1 black">This link will dim on hover</a>
-          <a href="#" class="f3 b db dim link pv1 gray">This link will dim on hover</a>
-          <a href="#" class="f3 b db dim link pv1 blue">This link will dim on hover</a>
-          <a href="#" class="f3 b db dim link pv1 dark-blue">This link will dim on hover</a>
-          <a href="#" class="f3 b db dim link pv1 darkest-blue">This link will dim on hover</a>
+          <a href="#" class="f3 b db dim link pv1 black-80">This link will dim on hover</a>
+          <a href="#" class="f3 b db dim link pv1 black-60">This link will dim on hover</a>
         </p>
         <h3 class="f5 book pt4 caps">Dim Card</h3>
         <p>
@@ -64,6 +60,12 @@ <h3 class="f5 book pt4 caps">Add pointer on hover</h3>
           <div href="#" class="link dim black mw5 dt hide-child ba b--black-20 pa4 br2 pointer">
               Add pointer on hover to element.
           </div>
+        <h3 class="f5 book pt4 caps">Grow on Hover</h3>
+        <a class="w5 mw5 dt grow link" href="#" style="background: black url(/img/1.jpg); background-size: cover;">
+          <span class="white-90 f5 f3-ns b ttu dtc v-mid w-100 h-100 pa3 pa5-ns br2">
+            Portfolio Project #11
+          </span>
+        </a>
         <div class="mt5 cf">
           <div class="dib mr4">
             <h1 class="f4 ttu tracked fw6">Previous</h1>