Search code examples
cssgridoverlay

Using CSS Grids, overlay text over image


Heyo,

I'm trying to use CSS Grids, to layer text over images in a grid. Basically I want to put the captions over the images. However, this does not work. I've tried searching the web, the main answers are about positions: but this doesn't seem to work either.

In the snippet I used background colors instead of images. I want the full text to go over these images.

img {
    width: 100%;
}

li {
    list-style: none;
    display: inline;
    text-decoration: none;
}

ol li {
    list-style-type: upper-roman;
}

a {
    text-decoration: none;
    color: black;
}

hr {
    margin-top: 10px;
    border-top: 1px solid black;
    width: 100%;
}

#about-me {
    font-weight: 700;
}

.tags {
    padding: 15px 0 15px 0;
    color: blue;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}


.case-img {
    width: 100%;
    background-size: cover;
    transition: 0.5s;
}

.case-img:hover {
filter: brightness(0.2);
}

#case-img-1 {
    background-image: url("img/save-topia.png");
    height: 40vh;
    background-color: red;
}

#case-img-2 {
    background-image: url("img/prototype.jpg");
    height: 40vh;
  background-color: blue;
}

#case-img-3 {
    background-image: url("img/great-lakes-algae-blooms.jpg");
    height: 40vh;
  background-color: green;
}
    
.case-container {
        display: grid;
        grid-template-columns: repeat (5, 20%);
        grid-template-rows: repeat (5, 20%);
        column-gap: 10px;
    }

    #case-1 { 
        grid-column: 1 / 4;
        grid-row: 1 / 6;
    }

    #case-2 { 
        grid-column: 4 / 6;
        grid-row: 1 / 3;
    }

    #case-3 { 
        grid-column: 4 / 6;
        grid-row: 3 / 6;
    }

    #caption-1 {
        grid-column: 1 / 4;
        grid-row: 1 / 6;
    }

    #caption-2 { 
        grid-column: 4 / 6;
        grid-row: 1 / 3;
    }

    #caption-3 { 
        grid-column: 4 / 6;
        grid-row: 3 / 6;
    }
<section class="case-container">
            <article id="case-1">
                <a href="save-topia.html"><div id="case-img-1" class="case-img"></div></a>
                <div id="caption-1" class="case-caption">
                    <h2>Saving App</h2>
                    <p>How might I be able to use behavioural economics and psychology to influence saving behaviour? </p>
                    <p class="tags">#UXResearch #UIDesign</p>
                </div>
            </article>
            <article id="case-2">
                <a href="drinking-buddy.html"><div id="case-img-2" class="case-img"></div></a>
                <div id="caption-2" class="case-caption">
                    <h2>Drinking Buddy</h2>
                    <p>Drinking buddy is a smart mug, with two major functions. It will make sure the barman will put enough alcohol in your mug and also prevent roofying. </p>
                    <p class="tags">#Arduino #RapidPrototyping</p>
                </div>
            </article>
            <article id="case-3">
                <a href=""><div id="case-img-3" class="case-img"></div></a>
                <div id="caption-3" class="case-caption">
                    <h2>GIS Remote Sensing</h2>
                    <p>Using satellite data for remote sensing GIS interface</p>
                    <p class="tags">#BigData #UXResearch #UIDesign</p>
                </div>
            </article>
        </section>


Solution

  • Grid is not inherited so you can't place non-grid elements on the grid. Your captions are not grid elements only the articles are.

    Make each article its own grid and then layer from there.

    a {
      text-decoration: none;
      color: black;
    }
    
    .tags {
      padding: 15px 0 15px 0;
      color: blue;
    }
    
    .flex-center {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .case-img {
      width: 100%;
      background-size: cover;
      transition: 0.5s;
    }
    
    #case-img-1 {
      height: 60vh;
      background-color: red;
    }
    
    #case-img-2 {
      height: 60vh;
      background-color: blue;
    }
    
    #case-img-3 {
      height: 90vh;
      background-color: green;
    }
    
    .case-container {
      display: grid;
      grid-template-columns: repeat (5, 20%);
      grid-template-rows: repeat (5, 20%);
      column-gap: 10px;
    }
    
    #case-1 {
      grid-column: 1 / 4;
      grid-row: 1 / 6;
    }
    
    #case-2 {
      grid-column: 4 / 6;
      grid-row: 1 / 3;
    }
    
    #case-3 {
      grid-column: 4 / 6;
      grid-row: 3 / 6;
    }
    
    article {
      display: grid;
      grid-template-columns: 1fr;
    }
    
    article a,
    .case-caption {
      grid-row: 1;
      grid-column: 1
    }
    <section class="case-container">
      <article id="case-1">
        <a href="save-topia.html">
          <div id="case-img-1" class="case-img"></div>
        </a>
        <div id="caption-1" class="case-caption">
          <h2>Saving App</h2>
          <p>How might I be able to use behavioural economics and psychology to influence saving behaviour? </p>
          <p class="tags">#UXResearch #UIDesign</p>
        </div>
      </article>
      <article id="case-2">
        <a href="drinking-buddy.html">
          <div id="case-img-2" class="case-img"></div>
        </a>
        <div id="caption-2" class="case-caption">
          <h2>Drinking Buddy</h2>
          <p>Drinking buddy is a smart mug, with two major functions. It will make sure the barman will put enough alcohol in your mug and also prevent roofying. </p>
          <p class="tags">#Arduino #RapidPrototyping</p>
        </div>
      </article>
      <article id="case-3">
        <a href="">
          <div id="case-img-3" class="case-img"></div>
        </a>
        <div id="caption-3" class="case-caption">
          <h2>GIS Remote Sensing</h2>
          <p>Using satellite data for remote sensing GIS interface</p>
          <p class="tags">#BigData #UXResearch #UIDesign</p>
        </div>
      </article>
    </section>