Überlagerungsbereich nicht auf div beschränkt

Ich habe Schwierigkeiten, einen Overlay / Hover-Befehl in CSS korrekt auszuführen. Ich habe 4 separate Divs nebeneinander, und wenn ich eine Überlagerung darauf lege, damit das Bild beim Schweben verblasst, wird der Hover-Effekt auch auf die anderen Divs mit dem Effekt angewendet, unabhängig davon, ob Sie über diesem Div schweben oder nicht . Ich habe versucht, den Schwebeflug auf ein Bild in der Div zu beschränken, konnte dies jedoch nicht. Die Seite, auf der Probleme auftreten, ist http://www.peel-lawfirm.com/practice-areas/workplace-injury

Hier ist mein 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;

Und hier ist mein HTML für diesen Teil der Seite-

<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>