I've created a hover effect for my gallery that is embedded in a Bootstrap Grid. Although the hover effect itself works fine, on some screen sizes, the overlay ends up covering the gallery images.
Does anyone have any ideas, solutions, or hints to solve this issue?
Here's an example:
HTML:
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4">
<a href="http://www.google.com">
<div class="box">
<img class="img-responsive" src="http://placehold.it/300x300" />
<div class="overbox">
<div class="title overtext">Client</div>
<div class="tagline overtext">Tag</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-4">
<a href="http://www.google.com">
<div class="box">
<img class="img-responsive" src="http://placehold.it/300x300" />
<div class="overbox">
<div class="title overtext">Client</div>
<div class="tagline overtext">Tag</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-4">
<a href="http://www.google.com">
<div class="box">
<img class="img-responsive" src="http://placehold.it/300x300" />
<div class="overbox">
<div class="title overtext">Client</div>
<div class="tagline overtext">Tag</div>
</div>
</div>
</a>
</div>
</div>
</div>
CSS:
.box {
position: relative;
cursor: pointer;
width: 100%;
min-height: 100%;
overflow: hidden;
margin-bottom: 30px;
}
.box .overbox {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 100;
background-color: rgba(204, 36, 42, 0.75);
color: #fff;
opacity: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.box:hover .overbox {
opacity: 1;
}
.box .title {
font-size: 22px;
line-height: 131%;
font-weight: 400;
text-align: center;
padding-top: 95px;
}
@media (max-width: 991px) {
.box .title {
padding-top: 43px;
}
}
.box .tagline {
position: absolute;
bottom: 0px;
padding-top: 16px;
padding-bottom: 16px;
width: 100%;
display: flex;
justify-content: center;
font-size: 16px;
font-weight: 400;
font-style: italic;
border-top: 1px solid rgb(255, 255, 255);
}
.box_client {
position: relative;
width: 100%;
height: 100%;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.box_client:hover {
background: rgb(235, 234, 233);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: grayscale(0%);
}
.img-responsive {
margin: 0 auto;
}