title: overlay area not restricted to div
body: <p>I am having difficult making an overlay/hover command in CSS work correctly. I have 4 separate div's side by side, and when I put an overlay on it to make the picture fade on hover, it puts the hover effect on the other div's with the effect as well regardless of whether or not you are hovering over that div. I tried to restrict the hover to an image in the div, but could not The page that is having the trouble is- <a href="http://www.peel-lawfirm.com/practice-areas/workplace-injury" rel="nofollow noreferrer">http://www.peel-lawfirm.com/practice-areas/workplace-injury</a></p>
  
  <p>Here is my CSS code-</p>
  
  <pre><code>.fade {
     opacity: 0.5;
     transition: opacity .25s ease-in-out;
     -moz-transition: opacity .25s ease-in-out;
     -webkit-transition: opacity .25s ease-in-out;
     }
  
     .fade:hover {
        opacity: 0.5;
      }
  .overlay {
    position: absolute;
    top: 0;
    bottom: 10;
    left: 0;
    right: 10;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #ffffff;
  }
  
  .container:hover .overlay {
    opacity: 0.7;
    overflow: hidden;
  }
  .text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  </code></pre>
  
  <p>And here is  my html for that portion of the page-</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;p&gt;
      &lt;h3 style="text-align:center;"&gt;Practice Areas&lt;/h3&gt;
    &lt;hr&gt;
    &lt;/p&gt;
      &lt;div class="row"&gt;
              &lt;div class="col-md-3 col-sm-6 col-xs-12"&gt;
                  &lt;p&gt;&lt;jdoc:include type="modules" name="box1" /&gt;&lt;/p&gt;  
              &lt;/div&gt;
               &lt;div class="col-md-3 col-sm-6 col-xs-12"&gt;
                  &lt;p&gt;&lt;jdoc:include type="modules" name="box2" /&gt;&lt;/p&gt;
               &lt;/div&gt;
       &lt;div class="clearfix visible-sm"&gt;&lt;/div&gt;
              &lt;div class="col-md-3 col-sm-6 col-xs-12"&gt;
                  &lt;p&gt;&lt;jdoc:include type="modules" name="box3" /&gt;&lt;/p&gt;  
              &lt;/div&gt;
              &lt;div class="col-md-3 col-sm-6 col-xs-12"&gt;
                  &lt;p&gt;&lt;jdoc:include type="modules" name="box4" /&gt;&lt;/p&gt;      
              &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>