I am experiencing an issue with my CSS and Bootstrap hover effect. The overlay tags are enclosed within a div class, but they all hover simultaneously. Each overlay belongs to a different Bootstrap grid, yet the effect extends even to the empty spaces between the photos. Any assistance on how to resolve this would be greatly appreciated. Thank you.
HTML:
<div class="container">
<div class="row">
<div class="col-md-12 text-align-center">
<h2 class="bold_font">BROWSE OUR CARDS</h2><br>
</div>
<div class="col-md-4 col-xs-12">
<a href="cards/list.php?tn=beauty">
<img class="img-responsive" src="img/_stock_mwc_beauty.jpg">
<div class="overlay">
<div class="overlay-content">
<img src="img/icon-beauty-white.png" class="img-responsive center-block">
<div class="spacer overlay-text">BEAUTY</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-xs-12">
<a href="cards/list.php?tn=health">
<img class="img-responsive" src="img/_stock_mwc_health.jpg">
<div class="overlay">
<div class="overlay-content">
<img src="img/icon-health-white.png" class="img-responsive center-block">
<div class="spacer overlay-text">HEALTH</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-xs-12">
<a href="cards/list.php?tn=wellness">
<img class="img-responsive" src="img/_stock_mwc_wellness.jpg">
<div class="overlay">
<div class="overlay-content">
<img src="img/icon-wellness-white.png" class="img-responsive center-block">
<div class="spacer overlay-text">WELLNESS</div>
</div>
</div>
</a>
</div>
</div>
</div>
CSS:
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #f08300;
}
.container:hover .overlay {
opacity: 1;
}
.overlay-content {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.spacer {
margin: 20px 0px 20px 0px;
}
For further information, here is the link to my JSFiddle where I have added placeholder images: http://jsfiddle.net/cnkgqhdw/1/