I am struggling to create a fixed image grid using HTML and CSS, but the size of the image grid is based on the size of the images. I don't have much experience with front-end development. I have included an image of how it currently looks and how I want it to look. Any help in getting this to work would be greatly appreciated. Thank you.
This is how it currently looks
** HTML**
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="product-grid">
<div class="product-image">
<a href="#">
<img class="pic-1" src="http://bestjquery.com/tutorial/product-grid/demo9/images/img-1.jpg">
<img class="pic-2" src="http://bestjquery.com/tutorial/product-grid/demo9/images/img-2.jpg">
</a>
<ul class="social">
<li><a href="" data-tip="Quick View"><i class="fa fa-search"></i></a></li>
<li><a href="" data-tip="Add to Wishlist"><i class="fa fa-shopping-bag"></i></a></li>
<li><a href="" data-tip="Add to Cart"><i class="fa fa-shopping-cart"></i></a></li>
</ul>
<span class="product-new-label">Sale</span>
<span class="product-discount-label">20%</span>
</div>
<ul class="rating">
<li class="fa fa-star"></li>
<li class="fa fa-star"></li>
<li class="fa fa-star"></li>
<li class="fa fa-star"></li>
<li class="fa fa-star disable"></li>
</ul>
<div class="product-content">
<h3 class="title"><a href="#">Women's Blouse</a></h3>
<div class="price">$16.00
<span>$20.00</span>
</div>
<a class="add-to-cart" href="">+ Add To Cart</a>
</div>
</div>
</div>
</div>
CSS (for the image part)
.product-grid {
font-family: Raleway,sans-serif;
text-align: center;
padding: 0 0 72px;
border: 1px solid rgba(0, 0, 0, 0.1);
overflow: hidden;
position: relative;
z-index: 1;
}
.product-grid .product-image {
position: relative;
-webkit-transition: all .3s ease 0s;
transition: all .3s ease 0s;
}
.product-grid .product-image a {
display: block;
}
.product-grid .product-image img {
width: 100%;
height: auto;
}
.product-grid .pic-1 {
opacity: 1;
-webkit-transition: all .3s ease-out 0s;
transition: all .3s ease-out 0s;
}
.product-grid:hover .pic-1 {
opacity: 1;
}
.product-grid .pic-2 {
opacity: 0;
position: absolute;
top: 0;
left: 0;
-webkit-transition: all .3s ease-out 0s;
transition: all .3s ease-out 0s;
}
.product-grid:hover .pic-2 {
opacity: 1;
}