title: CSS box-shadow transition
body: <p>I have several div elements on my website that are part of a class that has an inset box-shadow. When I hover over those div boxes, I want the inset property removed from the box-shadow, and I want it to transition to an outward shadow. However, though the shadow changes correctly, it doesn't transition during the change. It just instantly switches shadows. How do I fix this?</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;header&gt;
  
      &lt;div id="header-stuff"&gt;
  
          &lt;p class="header-big"&gt;Green Homes 101&lt;/p&gt;
  
          &lt;div id="header-links"&gt;
  
              &lt;div class="header-link"&gt;
                  &lt;a href="alt-en.html#top"&gt;
                      &lt;img src="images/index/alt-en.svg" alt="Alternate Energy" /&gt;
                      &lt;p&gt;Alternate Energy&lt;/p&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="header-link"&gt;
                  &lt;a href="diy.html#top"&gt;
                      &lt;img src="images/index/diy.svg" alt="DIY" /&gt;
                      &lt;p&gt;DIY&lt;/p&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="header-link"&gt;
                  &lt;a href="buying.html#top"&gt;
                      &lt;img src="images/index/buying.svg" alt="Buying Green Homes" /&gt;
                      &lt;p&gt;Buying Green Homes&lt;/p&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="header-link"&gt;
                  &lt;a href="about.html#top"&gt;
                      &lt;img src="images/index/about.svg" alt="About Us" /&gt;
                      &lt;p&gt;About Us&lt;/p&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/header&gt;
  </code></pre>
  
  <p>And here's the CSS:</p>
  
  <pre><code>.header-link {
      display: inline-block;
      background-color: rgba(50, 125, 42, 0.75);
      margin: 1%;
      overflow: hidden;
      border-radius: 10%;
      box-shadow:0 0 10px rgba(0, 0, 0, 0.7) inset;
  
      -ms-transition: all .25s linear;
      -moz-transition: all .25s linear;
      -webkit-transition: all .25s linear;
      -o-transition: all .25s linear;
  }
  
  .header-link &gt; a {
      display: block;
      width: 100%;
      height: 100%;
      color: rgba(10, 85, 2, 0.35);
      text-shadow: 1px 4px 6px rgba(33, 108, 25, 0.85), 0 0 0 #000, 1px 4px 6px rgba(33, 108, 25, 0.85);
      border-radius: 10%;
  }
  
  .header-link &gt; a &gt; img {
      display: block;
      width: 100%;
      height: 80%;
  }
  
  .header-link:hover {
      background-color: #1e9cd7;
      box-shadow:0 0 10px rgba(0, 0, 0, 0.7);
  
      -ms-transition: all .25s linear;
      -moz-transition: all .25s linear;
      -webkit-transition: all .25s linear;
      -o-transition: all .25s linear;
  }
  </code></pre>