Centering a Hover Overlay - html

Question

I'm trying to center this hover over lay with hardly any luck.
It seems I have to keep declaring media queries when I know there is an easier way around this. Any suggestions would help. You can find the code below.
Thanks!
.empty_canvas_content {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
padding: 0px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.containerclaims {
margin: 0 auto;
max-width: 1140px;
}
[class*=bit-] {
float: left;
padding: .3em;
}
/* Grids */
.box {
background: #00aabe;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 700;
text-align: center;
padding: 20px 0;
}
.box-2 {
background: #00aabe;
}
.bit-1 {
width: 100%;
}
.bit-2 {
width: 50%;
}
.bit-3 {
width: 33.33333%;
}
.bit-4 {
width: 25%;
}
.bit-5 {
width: 20%;
}
.bit-6 {
width: 16.66667%;
}
.bit-7 {
width: 14.28571%;
}
.bit-8 {
width: 12.5%;
}
.bit-9 {
width: 11.11111%;
}
.bit-10 {
width: 10%;
}
.bit-11 {
width: 9.09091%;
}
.bit-12 {
width: 8.33333%;
}
.bit-25 {
width: 25%;
}
.bit-40 {
width: 40%;
}
.bit-60 {
width: 60%;
}
.bit-75 {
width: 75%;
}
.bit-35 {
width: 35%;
}
.bit-65 {
width: 65%;
}
.hovereffect {
width: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #42b078;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
padding: 150px 20px;
}
.hovereffect img {
display: block;
position: relative;
max-width: none;
width: calc(100% + 20px);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.hovereffect:hover img {
opacity: 0.4;
filter: alpha(opacity=40);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
overflow: hidden;
padding: 0.5em 0;
background-color: transparent;
}
.hovereffect h2:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #fff;
content: '';
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.hovereffect:hover h2:after {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hovereffect a,
.hovereffect p {
color: #FFF;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.hovereffect:hover a,
.hovereffect:hover p {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* Responsive Goodness */
/* Defaults above are set Desktop resolution or higher */
/* Laptop */
#media (min-width: 50em) and (max-width: 68.75em) {
.bit-7,
.bit-35,
.bit-65 {
width: 100%;
}
.bit-10,
.bit-12,
.bit-4,
.bit-8 {
width: 50%;
}
.hovereffect .overlay {
padding: 130px 20px;
}
}
/* Tablet */
#media (min-width: 30em) and (max-width: 50em) {
.bit-10,
.bit-12,
.bit-4,
.bit-6,
.bit-8 {
width: 50%;
}
.bit-1,
.bit-11,
.bit-3,
.bit-5,
.bit-7,
.bit-9 {
width: 100%;
}
.hovereffect .overlay {
padding: 120px 20px;
}
}
/* Mobile */
#media (max-width: 30em) {
.bit-1,
.bit-10,
.bit-11,
.bit-12,
.bit-2,
.bit-3,
.bit-4,
.bit-5,
.bit-6,
.bit-7,
.bit-8,
.bit-9 {
width: 100%;
}
.hovereffect .overlay {
padding: 110px 20px;
}
}
<div class="containerclaims">
<div class="bit-2">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/350x250" width="100%" alt="">
<div class="overlay">
<h2>Effect 13</h2>
<p>
LINK HERE
</p>
</div>
</div>
</div>
<div class="bit-2">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/350x250" width="100%" alt="">
<div class="overlay">
<h2>Effect 13</h2>
<p>
LINK HERE
</p>
</div>
</div>
</div>
</div>
</div>

Answer 1

Edit your .hovereffect .overlay like this
.hovereffect .overlay {
width: 100%;
position: absolute;
overflow: hidden;
top: 50%;
left: 0;
text-align: center;
transform: translateY(-50%);
}
JsFiddle link
or use flexbox if your support allows it.
Also remove all padding from .hovereffect .overlay in media queries

Answer 2

If you can use flexbox, try this change on the overlay:
* { margin: 0;padding: 0;box-sizing: border-box;}
.containerclaims {margin: 0 auto;max-width: 1140px;}
[class*=bit-] {float: left;padding: .3em;}
.bit-2 {width: 50%;}
/*Changes Here*/
.hovereffect {
width: 100%;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #42b078;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
padding:0 20px;
display:flex;
flex-direction:column;
justify-content:center;
}
/*End Changes*/
.hovereffect img {
display: block;
position: relative;
max-width: none;
width: calc(100% + 20px);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.hovereffect:hover img {
opacity: 0.4;
filter: alpha(opacity=40);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
overflow: hidden;
padding: 0.5em 0;
background-color: transparent;
}
.hovereffect h2:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #fff;
content: '';
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.hovereffect:hover h2:after {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hovereffect a,
.hovereffect p {
color: #FFF;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.hovereffect:hover a,
.hovereffect:hover p {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
<div class="containerclaims">
<div class="bit-2">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/350x250" width="100%" alt="">
<div class="overlay">
<h2>Effect 13</h2>
<p>
LINK HERE
</p>
</div>
</div>
</div>
<div class="bit-2">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/350x250" width="100%" alt="">
<div class="overlay">
<h2>Effect 13</h2>
<p>
LINK HERE
</p>
</div>
</div>
</div>
</div>