How to fit every picture + text together on full screen.

I am wondering how should i fit this stuff together. Here is the picture : http://prntscr.com/kbekwy and picture 2: http://prntscr.com/kbel18

So i am aiming to achieve something like this from this website - http://prntscr.com/kbem11 Scroll over to picture sections in the middle representing products.

Here is my code :

** HTML **

    <div class="row">
            <div class="col-sm-3 pic1">
                <img src="resources/images/shops5.png" />
                <h5>Sunglass</h5>
            </div>
             <div class="col-sm-3 pic1">
                <img src="resources/images/shops2.png" />
                <h5>Sunglass</h5>
            </div>
            <div class="col-sm-3 pic1">
                <img src="resources/images/shops1b.png" />
                <h5>Sunglass</h5>
            </div>
             <div class="col-sm-3 pic1">
                <img src="resources/images/shops4.png" />
                <h5>Sunglass</h5>
            </div>
        </div>
           <div class="row">
            <div class="col-sm-3 pic2">
                <img src="resources/images/shops6.png" />
                <h5>Sunglass</h5>
            </div>
             <div class="col-sm-3 pic2">
                <img src="resources/images/shops7.png" />
                <h5>Sunglass</h5>
            </div>
            <div class="col-sm-3 pic2">
                <img src="resources/images/shops8.png" />
                <h5>Sunglass</h5>
            </div>
             <div class="col-sm-3 pic2">
                <img src="resources/images/shops9.png" />
                <h5>Sunglass</h5>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-3 pic3">
                <img src="resources/images/shops10.png" />
                <h5>Sunglass</h5>
            </div>
             <div class="col-sm-3 pic3">
                <img src="resources/images/shops11.png" />
                <h5>Sunglass</h5>
            </div>
            <div class="col-sm-3 pic3">
                <img src="resources/images/shops12.png" />
                <h5>Sunglass</h5>
            </div>
             <div class="col-sm-3 pic3">
                <img src="resources/images/shops13.png" />
                <h5>Sunglass</h5>
            </div>
        </div>

** CSS3 **

/* BOOTSTRAP VERSION */ 

.selection { width: 200%; padding: 0; margin: 0; }

.pic1 img { width: 150%; padding-top: 4.2%; height: auto; }

.pic2 img { width: 150%; padding-top: 4.2%; height: auto; }

.pic3 img { width: 150%; padding-top: 4.2%; height: auto; }

I will strongly appreciate any help!