title: Add Shadow Effect on Hover to DIV boxes
body: <p>I'm currently trying to figure out a way to make it so that upon hovering over each separate box on the front page of my website (<a href="http://thefloodplains.com/" rel="nofollow noreferrer">http://thefloodplains.com/</a>), a shadow animation occurs for that specific box. I want it to look very similar to what can be found at this page: <a href="http://tobiasahlin.com/blog/how-to-animate-box-shadow/" rel="nofollow noreferrer">http://tobiasahlin.com/blog/how-to-animate-box-shadow/</a>. I've used this page as a guide in an attempt to set up a hover shadow effect.</p>
  
  <p>Here's the CSS/HTML specifically for the div boxes on my web page (<a href="http://thefloodplains.com/" rel="nofollow noreferrer">http://thefloodplains.com/</a>):</p>
  
  <pre><code>.col-md-4 {
      color:#00A5D1;
      height:300px;
  }
  
  .col-md-3 {
      color:#00A5D1;
      height:300px;
      box-shadow: 2 2px 3px rgba(0, 0, 0.1, 0.1);
      -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
      transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  
  .col-md-4:hover {
      background-color: #FFE097;
  }
  .col-md-3:hover {
      -webkit-transform: scale(1.25, 1.25);
      transform: scale(1.25, 1.25);
      }
  
  .col-md-4 h3 {
      position: relative;
      top: 40%;
      transform: translateY(-50%);
  }
  
  .col-md-4 {
      color:#00A5D1;
      height:300px;
      border: 1px solid #FF8B6F;
      position: relative;
  }
  
  .col-md-3 {
      height:300px;
      position: relative;
  }
  
  .col-md-4:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: block;
    background: #FFE097;
    opacity: 0;
  }
  
  .col-md-3:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;    
    left: 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    opacity: 0;
    -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  
  .col-md-4:hover:after {
    opacity: .5;
  }
  
  .col-md-3:hover:after {
    opacity: 1;
  }
  
  .col-md-4 h3 {
      position: relative;
      z-index: 1;
      top: 40%;
      transform: translateY(-50%);
  }
  </code></pre>
  
  <p>Anything with the class ".col-md-3" is where I have attempted to add in the hover-shadow effects (in much the same way that I already have the current hover-color effects set up). The following code is the rest of the CSS/HTML of my front page:</p>
  
  <pre><code>&lt;style&gt;
      h3 {
          font-size:36px;
          font-style: bold;
          text-align:center;
          font-family:'Buernard', Garamond, "Buenard", "EB Garamond",'EB Garamond';
      }
      img {
          max-width: 100%;
          max-height: 100%;   
      }
      #div1 {
              background-image: url('AboutIcon.png');
              background-position: center center; //center the image in the div
              background-size: cover; //cover the entire div
              background-repeat: no-repeat;
              background-size: 100%;
      }
      #div2 {
              background-image: url('ArticlesIcon.png');
              background-position: center center; //center the image in the div
              background-size: contain; //cover the entire div
              background-repeat: no-repeat;
              background-size: 100%;
      }
      #div3 {
              background-image: url('CodingBrackets2.png');
              background-position: center center; //center the image in the div
              background-size: cover; //cover the entire div
              background-repeat: no-repeat;
              background-size: 100%;
      }
      #div4 {
              background-image: url('ContactIcon.png');
              background-position: center center; //center the image in the div
              background-size: contain; //cover the entire div
              background-repeat: no-repeat;
              background-size: 100%;
      }
      #div5 {
              background-image: url('FSMusicArt.png');
              background-position: center center; //center the image in the div
              background-size: cover; //cover the entire div
              background-repeat: no-repeat;
              background-size: 100%;
      }
      #div6 {
              background-image: url('AudioProduction4.png');
              background-position: center center; //center the image in the div
              background-size: cover; //cover the entire div
              background-repeat: no-repeat;
              background-size: 100%;
      }
      #div7 {
              background-image: url('Violin3.png');
              background-position: center center; //center the image in the div
              background-size: cover; //cover the entire div
              background-repeat: no-repeat;
              background-size: 100%;
      }
      #div8 {
              background-image: url('GalleryImage2.png');
              background-position: center center; //center the image in the div
              background-size: cover; //cover the entire div
              background-repeat: no-repeat;
              background-size: 100%;
      }
      #div9 {
              background-image: url('Handshake2.png');
              background-position: center center; //center the image in the div
              background-size: cover; //cover the entire div
              background-repeat: no-repeat;
              background-size: 100%;
      }
      div {
          background-image:url(../images/please-dont-use-spaces.jpg); //add the background image
          background-position: center center; //center the image in the div
          background-size: cover; //cover the entire div
      }
      &lt;/style&gt;    
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;a href="About.html" title="About the site and Author"&gt;&lt;div class="col-md-4" id='div1'&gt;
                      &lt;h3&gt;About&lt;/h3&gt;
                      &lt;/div&gt;&lt;/a&gt;
                  &lt;a href="Articles.html" title="Original Articles and Content"&gt;&lt;div class="col-md-4" id='div2'&gt;
                      &lt;h3&gt;Articles&lt;/h3&gt;
                  &lt;/div&gt;
                  &lt;a href="CodingCorner.html" title="Coding Corner - Code for a Variety of Projects"&gt;&lt;div class="col-md-4" id="div3"&gt;
                      &lt;h3&gt;Coding Corner&lt;/h3&gt;
                  &lt;/div&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;a href="Contact-Social.html" title="Contact The Floodplains &amp; The FloodShark"&gt;&lt;div class="col-md-4" id="div4"&gt;
                    &lt;h3&gt;Contact &amp; Social&lt;/h3&gt;
                  &lt;/div&gt;&lt;/a&gt;
                  &lt;a href="TheFloodSharkMain.html" title="The FloodShark Music and Media"&gt;&lt;div class="col-md-4" id="div5"&gt;
                      &lt;h3&gt;
                      The FloodShark
                      Music
                      &lt;/h3&gt;
                  &lt;/div&gt;&lt;/a&gt;
                  &lt;a href="FloodplainProductions.html" title="Floodplain Productions - virtual record label"&gt;&lt;div class="col-md-4" id="div6"&gt;
                      &lt;h3&gt;Floodplain Productions&lt;/h3&gt;
                  &lt;/div&gt;&lt;/a&gt;
              &lt;/div&gt;  
              &lt;div class="row"&gt;   
                  &lt;a href="ClassicalCorner.html" title="Classical Corner - A nook dedicated to sharing and categorizing classical music"&gt;&lt;div class="col-md-4" id="div7"&gt;
                      &lt;h3&gt;Classical Corner&lt;/h3&gt;
                  &lt;/div&gt;&lt;/a&gt;
                  &lt;a href="Gallery.html" title="Images, Photographs, and Album Art"&gt;&lt;div class="col-md-4" id="div8"&gt;
                      &lt;h3&gt;Gallery&lt;/h3&gt;
                  &lt;/div&gt;&lt;/a&gt;
                  &lt;a href="Contribute-Support.html" title="Contribute to The Floodplains!"&gt;&lt;div class="col-md-4" id="div9"&gt;
                      &lt;h3&gt;Contribute / Support&lt;/h3&gt;
                  &lt;/div&gt;&lt;/a&gt;
              &lt;/div&gt;  
          &lt;/div&gt;  
      &lt;/body&gt;
  </code></pre>
  
  <p>I tried adding "col-md-3" to the div's as a second class in the above code along with "col-md-4," which controls the color hover effect. The problem is, I don't think this method works, but I'm not really sure what does. As of right now, I'm using the "col-md-4" color hover effect - which is working - but getting a shadow effect to work simultaneously is something I have yet to figure out.</p>
  
  <p>So currently - upon hovering - the boxes turn to that transparent shade of orange/yellow. Is there a way that I can get the shadow animation AND the color-change hovers to work together at the same time? So basically I just need a hover animation added to what is already here at <a href="http://thefloodplains.com/" rel="nofollow noreferrer">http://thefloodplains.com/</a>.</p>
  
  <p>Thank you in advance for your time.</p>