Question

0

285

Views

How to make a responsive rectangle grid with images inside

I am trying to make a rectangular grid on my portfolio website with images inside. The problem is that all of these images have different sizes, which makes it hard for me to create a good modular grid where the ratio stays the same.

Here is a picture of how it looks right now:

I want all of the images to look like the top right image within the grid, and when when the page is made smaller, is should keep the same ratio. I is fine by me to work with object-fit: cover, so parts of the image will be cut off.

Now my code looks like this (I wrote only copied the first two as example):

.grid:after {
  content: '';
  display: inline-block;
  /* clear: both; */
  column-count: 4;
  /* column-gap: 0; */
}

.element-item {
  position: relative;
  border: 1px solid black;
  width: 50%;
  height: auto;
  margin-left: -1px;
  margin-top: -1px;
  padding: 10px;
  background: white;
}

.element-item img {
  position: relative;
  width: 100%;
  height: 450px;
  object-fit: cover;
}


/* CHANGE IMG ON HOVER */

.switch {
  position: relative;
  display: inline-block;
}

.switch .img-top {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

.switch:hover .img-top {
  display: inline;
}

<div class="grid">


  <div id="techweek" class="element-item Coding Motion Poster">
    <div class="extra">coding</div>
    <div class="extra">poster</div>
    <div class="image">
      <a href="techweek.html">
        <div class="switch">
          <img src="img work/TechweekGif1.gif" alt="Glass Back" />
          <img src="img work/TechweekGif2.gif" class="img-top" alt="Glass Front" />
        </div>
      </a>
    </div>
    <div class="text">Type in Motion
      <p2>2020</p2>
    </div>
  </div>

  <div id="mytho" class="element-item Book" data-category="alkali">
    <div class="extra">book</div>
    <div class="image">
      <a href="mytho.html">
        <div class="switch">
          <img src="img work/Mytho1.1.jpg" alt="Glass Back" />
          <img src="img work/Mytho1.jpg" class="img-top" alt="Glass Front" />
        </div>
      </a>
      <div class="text">How It Really Happened
        <p2>2019</p2>
      </div>
    </div>
  </div>

</div>

about 4 years ago · Juan Pablo Isaza

Answer question

0

285

How to make a responsive rectangle grid with images inside

Find remote jobs

Andres GPT