Эскиз сетки изображения изменить размер вопроса

Question

Так что я пытаюсь создать портфолио с наведением с текстом. Я попытался сделать его немного отзывчивым с помощью бутстрапа, но я не могу понять, как изображение сосредоточено в div при уменьшении.

Я действительно хочу получить что-то вроде этого (https://www.weblounge.be/en/)

с максимумом 100% и шириной 100%, чтобы всегда показывать полный размер изображения при изменении размера.

Я думаю, что я делаю что-то неправильно, но не могу найти проблему.

мой нарост

<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> 

и 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); 
     } 
    } 
    } 
} 

Мой codepen, чтобы показать, что это не так: http://codepen.io/denniswegereef/pen/MwJXde

Answer 1

Вы должны использовать изображения продукта в качестве фонового изображения в продукт div:

<div class="box"> 
    <div class="product-image" style="background-image: url(http://i.imgur.com/DuUtNax.jpg)"></div> 
    ... 
</div> 

, а затем изменить CSS от .box img, чтобы .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/