Fix image grid using html and css

Question

I am trying to create a fix image grid using html and CSS but image grid is size based on the image size. I am not so good in front-end.I added the image of the current way it display, and way I want it to display. Please need help to make this work. Thanks.

Currently Like this

Should be like this

** 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;
}

focus.style · Accepted Answer · 2020-05-19 13:58:32Z

1

Rewrited your CSS a little. There are two tricks. One with object-fit: cover; and other with padding of inner element.

.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;
  overflow: hidden; /* hiding parts of image */
}
/* this will help you to add a flexible height, based on width of a parent */
.product-grid .product-image::before {
  content: '';
  display: block;
  position: relative;
  padding-top: 133%;
  width: 100%;
  height: auto;
}
.product-grid .product-image a {

}
/* all this code will make img to act like background image */
.product-grid .product-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  object-fit: cover;
}
.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;
  -webkit-transition: all .3s ease-out 0s;
  transition: all .3s ease-out 0s;
}
.product-grid:hover .pic-2 {
  opacity: 1;
}

If you don't want image to be cropped - you can change object-fit: cover; to object-fit: contain;.

edited May 19, 2020 at 13:58

answered May 19, 2020 at 13:50

focus.style

6,7704 gold badges28 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Naheem Olaniyan Over a year ago

Thanks so much you are life safer. I will read more about the object-fit: cover; Thanks again.

Collectives™ on Stack Overflow

Fix image grid using html and css

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related