Make overlay box stay inside of a picture - html

Question

I am trying to make some hover effects over an image. See a demosite here. I am getting stuck now, because I would like the box there is coming when you hover to be centered on each image, no matter what the image size is.
I have tried to place the hover with padding, but that is not a good solution. Does anybody knows how I can center the gradient overlay on each picture, no matter the size og the picture?
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover .overlay {
background-color: rgba(170,170,170,0.4);
}
.hovereffect h2, .hovereffect img {
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect img {
display: block;
position: relative;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.hovereffect:hover img {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
}
.hovereffect a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
margin: 50px 0 0 0;
background-color: transparent;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
font-weight: normal;
height: 85%;
width: 85%;
position: absolute;
top: -20%;
left: 8%;
padding: 70px;
}
.hovereffect:hover a.info {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
background-color: rgba(0,0,0,0.4);
}
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="hovereffect">
<img class="img-responsive" src="https://www.capitalhyundai.ca/wp-content/uploads/sites/385/2017/08/2017-hyundai-elantra-gt-interior-view.jpg" alt="text"></img>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
</div>
<br/><br/>
<div class="row">
<div class="col-sm-5">
<div class="hovereffect">
<img class="img-responsive" src="https://www.carzone.ie/newcar/assets/img/models/kiasportage-abb0540cd673ba0e6dd80d5e1edc9c64.jpg" alt="text"></img>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
</div>
<br/><br/>
<div class="row">
<div class="col-sm-3">
<div class="hovereffect">
<img class="img-responsive" src="http://solcontrolcustomsandtint.com/wp-content/uploads/2014/09/car-audio-system-sound-4.jpg" alt="text"></img>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
</div>
</div>

Answer 1

Firt make the image container inline-block so that its width is defined by its content then you can easily adjust the overlay:
.hovereffect {
display:inline-block;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover .overlay {
background-color: rgba(170,170,170,0.4);
}
.hovereffect h2, .hovereffect img {
transition: all 0.4s ease-in-out;
}
.hovereffect img {
display: block;
position: relative;
transform: scale(1.1);
}
.hovereffect:hover img {
transform: scale(1);
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
}
.hovereffect a.info {
text-decoration: none;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
opacity: 0;
transform: scale(1.5);
transition: all 0.4s ease-in-out;
font-weight: normal;
height: 85%;
width: 85%;
top:7.5%; /* (100% - 85%)/2 */
left:7.5%;
position: absolute;
}
.hovereffect:hover a.info {
opacity: 1;
transform: scale(1);
background-color: rgba(0,0,0,0.4);
}
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="hovereffect">
<img class="img-responsive" src="https://www.capitalhyundai.ca/wp-content/uploads/sites/385/2017/08/2017-hyundai-elantra-gt-interior-view.jpg" alt="text"></img>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
</div>
<br/><br/>
<div class="row">
<div class="col-sm-5">
<div class="hovereffect">
<img class="img-responsive" src="https://www.carzone.ie/newcar/assets/img/models/kiasportage-abb0540cd673ba0e6dd80d5e1edc9c64.jpg" alt="text"></img>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
</div>
<br/><br/>
<div class="row">
<div class="col-sm-3">
<div class="hovereffect">
<img class="img-responsive" src="http://solcontrolcustomsandtint.com/wp-content/uploads/2014/09/car-audio-system-sound-4.jpg" alt="text"></img>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
</div>
</div>