Thumbnail grid image resize issue - css

Question

So i'm trying to create a portfolio with an hover with text.
I tried to make it a little responsive with bootstrap, but I can't get it right how the image is centered in the div when you scaling down.
I really wanna get something like this ( https://www.weblounge.be/en/ )
With an high of 100% and a width of 100% to always show the full size of the image when resizing.
I guess I do something wrong but can't find the issue.
my buildup is
<div class="col-lg-4 col-sm-6 nopad">
<div class="box">
<img src="http://i.imgur.com/DuUtNax.jpg">
<div class="overlay">
<h5>Random website</h5>
<p class="text">Random text</p>
</div>
</div>
</div>
and the css
.container {
background-color: #fff;
padding: 100px 0px 100px 0px;
.nopad {
padding-left: 0px;
padding-right: 0px;
}
.box {
cursor: pointer;
height: 400px;
position: relative;
overflow: hidden;
width: 100%;
text-align: left;
img {
position: absolute;
width: 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;
}
.overlay {
background: rgba(0, 0, 0, 0.7);
position: absolute;
left: 0;
z-index: 100;
opacity: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
text-align: center;
padding-top: 20%;
-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;
h5 {
color:#fff;
opacity: 0;
transition-delay: 0.1s;
transition-duration: 0.2s;
transform: translateY(60px);
-webkit-transform: translateY(60px);
}
p {
color: #fff;
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.2s;
transform: translateY(60x);
-webkit-transform: translateY(60px);
}
.button-white {
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.2s;
transform: translateY(60px);
-webkit-transform: translateY(60px);
margin: 0px;
}
}
&:hover img {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
}
&:hover .overlay {
opacity: 1;
h5 {
opacity: 1;
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
p {
opacity: 1;
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
}
}
}
My codepen to show what is wrong: http://codepen.io/denniswegereef/pen/MwJXde

Answer 1

You need to use the product images as a background-image in a product div:
<div class="box">
<div class="product-image" style="background-image: url(http://i.imgur.com/DuUtNax.jpg)"></div>
...
</div>
and then change your css from .box img, to .box .product-image:
.box {
.product-image {
position: absolute;
width: 100%;
height:100%;
-webkit-transition: all 300ms ease-out;
transition: all 300ms ease-out;
background-repeat: no-repeat;
background-size: cover;
}
&:hover .product-image {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
}
http://jsfiddle.net/8pfjdmb4/