CSS responsive image grid

I am struggling with creating a responsive image gallery. I am using CSS and Bootstrap, I tried with tag, and as background, I couldn't get it to work.

so, this is what I want to achieve:

https://www.socialprintstudio.com/products/

image grid without image warp or overlapping

When you make your browser smaller, the image aspect ratio stays the same; only the size changes. Later, you get two per row, which I can do with col-lg-4 col-md-6, etc.

I would also prefer if I could do this with img tag as I think it is easier to fade one image to another on hover.

This is my HTML

<div class="item " data-categoryid="2">
    <div class="item-image">
        <div class="img-bg" style="background: url(&quot;http://laravel.dev/images/bon2.jpg&quot;); display: none;">
        </div>
        <div class="img-bg" style="background: url(&quot;http://laravel.dev/images/bon.jpg&quot;);"></div>
    </div>
    <div class="item-name">Some name</div>
    <div class="item-price">price €</div>
    <div class="item-button">
        <a href="#" class="btn btn-primary">Button.</a>
    </div>
</div>

Solution

As you said, using bootstrap's .col classes is the way to go here: Here's a resizable jsfiddle: https://jsfiddle.net/aL1ndzgg/1/

Images, by default, will keep their aspect ratio, unless you specify both the width and the height.

For the hover effect you can have only one of the images for each box set as as position: absolute;; that way, the other image will set the size of the box.

.single-image-container {
  margin-bottom: 20px;
  position: relative;
}

.single-image-container img {
  width: 100%;
}

.blocker {
  position: relative;
  overflow: hidden;
}

.hover-image {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 125ms ease-in-out;
}

.single-image-container:hover .hover-image {
  opacity: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 col-md-4 single-image-container">
      <div class="blocker">
        <img src="http://placehold.it/400x400" alt="img">
        <img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2">
      </div>
    </div>
    <div class="col-xs-6 col-md-4 single-image-container">
      <div class="blocker">
        <img src="http://placehold.it/400x400" alt="img">
        <img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2">
      </div>
    </div>
    <div class="col-xs-6 col-md-4 single-image-container">
      <div class="blocker">
        <img src="http://placehold.it/400x400" alt="img">
        <img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2">
      </div>
    </div>
    <div class="col-xs-6 col-md-4 single-image-container">
      <div class="blocker">
        <img src="http://placehold.it/400x400" alt="img">
        <img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2">
      </div>
    </div>
    <div class="col-xs-6 col-md-4 single-image-container">
      <div class="blocker">
        <img src="http://placehold.it/400x400" alt="img">
        <img class="hover-image" src="http://placehold.it/400x400/f00" alt="img2">
      </div>
    </div>
  </div>
</div>