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!