Responsive grid tile overlay

Question

I have this grid where (usually) you can select one of the tiles. A selected tile is supposed to have a transparent blue overlay. How can you make an image overlay in a grid that remains the width of its container when resizing the grid width?

As such:

I made .tile__overlay position: absolute;, which looks good at first glance. But it means that I lose the responsiveness, meaning that the overlay does not adjust to its parent size when the tiles are smaller than their maximum size.

.grid {
  display: grid;
  grid-gap: 6px;
  max-width: 306px;
  grid-template-columns: minmax(min-content, 150px) minmax(min-content, 150px);
}

.tile {
  padding: 0;
  border: 0;
  max-height: 150px;
  max-width: 150px;
}

.tile__image {
  height: 100%;
  width: 100%;
  max-height: 150px;
  max-width: 150px;
  display: block;
  object-fit: contain;
}

.tile__overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(29, 151, 255, 0.9);
}

<div class="grid">
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/1/150/150.jpg" alt="">
  </button>
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/18/150/150.jpg" alt="">
  </button>
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/33/150/150.jpg" alt="">
    <div class="tile__overlay" />
  </button>
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/47/150/150.jpg" alt="">
  </button>
</div>

i commented yesterday about this and gave you a working example. https://codesandbox.io/s/selectable-resizable-grid-items-with-placeholders-srhyy .the hint was : absolute/relative. i even added a counter to show you could add text in the middle Your duplicate : https://stackoverflow.com/questions/60662044/responsive-grid-overlay that you could have edited with you code from here , so it could be reopened — G-Cyrillus, Mar 13 '20 at 10:51

score 1 · Answer 1 · edited Apr 23 '20 at 20:29

Added CSS for below mentioned

button.tile:after {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: hsla(240, 100%, 50%, 0.5411764705882353);
    z-index: 999;
    content: '';
}
.tile{position:relative;}

.grid {
  display: grid;
  grid-gap: 6px;
  max-width: 306px;
  grid-template-columns: minmax(min-content, 150px) minmax(min-content, 150px);
}

.tile {
  padding: 0;
  border: 0;
  max-height: 150px;
  max-width: 150px;
}

.tile__image {
  height: 100%;
  width: 100%;
  max-height: 150px;
  max-width: 150px;
  display: block;
  object-fit: contain;
}

.tile__overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(29, 151, 255, 0.9);
}

button.tile:after {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: hsla(240, 100%, 50%, 0.5411764705882353);
    z-index: 999;
    content: '';
}
.tile{position:relative;}

<div class="grid">
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/1/150/150.jpg" alt="">
  </button>
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/18/150/150.jpg" alt="">
  </button>
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/33/150/150.jpg" alt="">
    <div class="tile__overlay" />
  </button>
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/47/150/150.jpg" alt="">
  </button>
</div>

score 0 · Answer 2 · answered Mar 13 '20 at 10:58

Using pseudo code you can easily achieve this. I also added active class for visuals, You can play with colors as you desire in following class tile:hover::after

.grid {
  display: grid;
  grid-gap: 16px;
  max-width: 306px;
  grid-template-columns: minmax(min-content, 150px) minmax(min-content, 150px);
}

.tile {
  padding: 0;
  border: 0;
  max-height: 150px;
  max-width: 150px; 
  position: relative;
  border: 1px solid transparent;
}

.tile__image {
  height: 100%;
  width: 100%;
  max-height: 150px;
  max-width: 150px;
  display: block;
  object-fit: contain;
}

.tile:hover::after,
.tile:active::after,
.tile:focus::after,
.tile.active::after{
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(29, 151, 255, 0.57);
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-shadow: 0px 0px 5px 5px #6BA1F9;
    border: 1px solid #ffffffab;
    border-radius: 4px;
}
}

<div class="grid">
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/1/150/150.jpg" alt="">
  </button>
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/18/150/150.jpg" alt="">
  </button>
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/33/150/150.jpg" alt="">
    <div class="tile__overlay" />
  </button>
  <button class="tile" type="button">
    <img src="https://i.picsum.photos/id/47/150/150.jpg" alt="">
  </button>
</div>

Responsive grid tile overlay

2 Answers2