title: Hover Clip not Working
body: <p>I am trying to use CSS to clip a figure to 20px and then show the full figure when I hover over it. However the clip region does not change when I hover over it.</p>
  
  <p>My CSS looks like this:</p>
  
  <pre><code>#map figure {
      background-color: rgb(70,76,222);
      color: white;
      width: 150px;
      border-radius: 15px;
      position: absolute;
      z-index: 1;
      clip: rect(0px, 20px, 20px, 0px);
  }
  
  figure:hover {
      clip: rect(0px, 150px, 150px, 0px);
      z-index: 2;
  }
  </code></pre>
  
  <p>The HTML Looks like</p>
  
  <pre><code>&lt;figure id="point1"&gt;
      &lt;img src="image1.jpg" alt="" /&gt;
      &lt;figcaption&gt;
         &lt;time&gt;5:30 a.m.&lt;/time&gt; Stop at Mills Moraine for a 
         view of the sunrise.
      &lt;/figcaption&gt;
  &lt;/figure&gt;
  </code></pre>
  
  <p>Can you tell me why the clip rectangle doesn't change on hover?</p>