Используя сетку CSS, наложите текст поверх изображения

Question

Heyo,

Я пытаюсь использовать CSS Grids, чтобы накладывать текст на изображения в сетке. В основном я хочу поставить captions поверх изображений. Однако это не работает. Я пробовал искать в Интернете, основные ответы касаются позиций: но это тоже не работает.

В фрагменте я использовал цвета фона вместо изображений. Я хочу, чтобы полный текст был go поверх этих изображений.

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>

Answer 1

Сетка не наследуется, поэтому вы не можете размещать элементы без сетки в сетке. Ваши подписи не являются элементами сетки, а являются только статьи.

Сделайте каждую статью отдельной сеткой, а затем наложите оттуда слой.

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>

Answer 2

Вам нужно разместить свои подписи внутри div, содержащего изображение, и если вы хотите использовать grid конкретно, тогда ответ @ Paulie_D подходит.

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("https://images.all-free-download.com/images/graphicthumb/goa_small_bird_202958.jpg");      /*MODIFIED IMAGE LINK*/
    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 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>
                
                </div></a>
                
            </article>
            <article id="case-2">
                <a href="drinking-buddy.html"><div id="case-img-2" class="case-img">
                
                  <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>
                
                </div></a>
                
            </article>
            <article id="case-3">
                <a href=""><div id="case-img-3" class="case-img">
                
                  <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>
                
                </div></a>
                
            </article>
        </section>