overlay area not restricted to div

Question

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- http://www.peel-lawfirm.com/practice-areas/workplace-injury

Here is my CSS 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;

And here is my html for that portion of the page-

<div class="container">
  <p>
    <h3 style="text-align:center;">Practice Areas</h3>
  <hr>
  </p>
    <div class="row">
            <div class="col-md-3 col-sm-6 col-xs-12">
                <p><jdoc:include type="modules" name="box1" /></p>  
            </div>
             <div class="col-md-3 col-sm-6 col-xs-12">
                <p><jdoc:include type="modules" name="box2" /></p>
             </div>
     <div class="clearfix visible-sm"></div>
            <div class="col-md-3 col-sm-6 col-xs-12">
                <p><jdoc:include type="modules" name="box3" /></p>  
            </div>
            <div class="col-md-3 col-sm-6 col-xs-12">
                <p><jdoc:include type="modules" name="box4" /></p>      
            </div>
    </div>
  </div>

Answer 1

You have .container:hover .overlay {...} which means when the .container div is hovered it will apply for all .overlay divs inside it. You need to apply the :hover only for the desired .overlay divs inside the .custom divs.

Change .container:hover .overlay {...} to .custom:hover .overlay