我有一个问题，在我为一个朋友构建的网站上，在图像上覆盖文本。有问题的页面是https://olangolangclay.com/art_en.html。当我在Firefox中鼠标放在它上面时，文本根本不会出现。在Chrome中，它有时会出现，当它出现时经常闪烁。在手机上，当点击图像时，在任何浏览器中，它似乎都不会出现。有人能看看这个HTML和CSS，让我知道我做错了什么吗？我知道的足以彻底打破一切。我在Dreamweaver中完成了大部分工作，但也有一些在Bluefish中完成。

顺晟科技：

您有错误的DOM构造，当您的文本出现时，您将失去img上的悬停效果 您应该在div.img中放置文本

@charset "utf-8";

/* CSS Document */

body {
  font-family: 'Noto Serif KR', serif;
  background-image: url("website_bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.indexpage {
  background-color: #f1f4ed;
  background-image: none;
}

.indexpic {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.container {
  display: grid;
  max-width: 100%;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: .01fr .01fr .01fr .01fr .01fr .01fr;
  grid-template-areas: "nav nav nav nav" "header header header header" "intro intro intro intro" "img1 img1 img2 img3" "img1 img1 img4 img4" "footer footer footer footer";
  grid-gap: 5px;
}

nav {
  grid-area: nav;
  text-align: center;
}

nav a {
  text-decoration: none;
  color: #c3adc3;
}

header {
  grid-area: header;
  text-align: center;
  color: #c3adc3;
}

.intro {
  grid-area: intro;
  margin-left: 30px;
  margin-right: 30px;
  margin-bottom: 50px;
  font-size: 1.5em;
  padding: 10px 20px 10px 20px;
  background: linear-gradient(#bab6b3, #efeeec);
  box-shadow: -5px 5px 5px #808080;
  text-align: justify;
  text-justify: inter-word;
}

.img1 {
  grid-area: img1;
}

.img1 img {
  width: 100%;
}

.text1 {
  display: none;
  background-color: rgba(128, 128, 128, 0.8);
  object-fit: scale-down;
  bottom: 0px;
  transition: all 0s ease-in-out;
  grid-area: img1;
}

.img1:hover+.text1 {
  display: block;
  color: #000000;
  font-weight: 600;
  object-fit: scale-down;
  max-width: 100%;
  flex: 1;
  min-height: 0;
  padding: 10px;
}

.img2 {
  grid-area: img2;
}

.img2 img {
  width: 100%;
}

.text2 {
  display: none;
  background-color: rgba(128, 128, 128, 0.8);
  object-fit: scale-down;
  bottom: 0px;
  transition: all 0s ease-in-out;
  grid-area: img2;
}

.img2:hover+.text2 {
  display: block;
  color: #000000;
  font-weight: 600;
  object-fit: scale-down;
  max-width: 100%;
  flex: 1;
  min-height: 0;
  padding: 10px;
}

.img3 {
  grid-area: img3;
}

.img3 img {
  width: 100%;
}

.text3 {
  display: none;
  background-color: rgba(128, 128, 128, 0.8);
  object-fit: scale-down;
  bottom: 0px;
  transition: all 0s ease-in-out;
  grid-area: img3;
}

.img3:hover+.text3 {
  display: block;
  color: #000000;
  font-weight: 600;
  object-fit: scale-down;
  max-width: 100%;
  flex: 1;
  min-height: 0;
  padding: 10px;
}

.img4 {
  grid-area: img4;
}

.img4 img {
  width: 100%;
}

.text4 {
  display: none;
  background-color: rgba(128, 128, 128, 0.8);
  object-fit: scale-down;
  bottom: 0px;
  transition: all 0s ease-in-out;
  grid-area: img4;
}

.img4:hover+.text4 {
  display: block;
  color: #000000;
  font-weight: 600;
  object-fit: scale-down;
  max-width: 100%;
  flex: 1;
  min-height: 0;
  padding: 10px;
}

footer {
  grid-area: footer;
  text-align: center;
}

@media only screen and (max-width: 700px) {
  .container {
    display: grid;
    font-size: 1em;
    max-width: 100%;
    height: 100vh;
    grid-template-columns: 1fr;
    grid-template-areas: "nav" "header" "intro" "img1" "img2" "img3" "img4" "footer";
  }
  header img {
    width: 100%;
  }
  .intro {
    margin: 10px;
  }
  .img1 img {
    width: 100%;
    text-align: center;
  }
   :lang(ko).text1 {
    font-size: .9em;
  }
   :lang(en).text1 {
    font-size: .8em;
  }
  .img2 img {
    width: 100%;
    text-align: center;
  }
  .img3 img {
    width: 100%;
    text-align: center;
  }
  .img4 img {
    width: 100%;
    text-align: center;
  }
   :lang(ko).text4 {
    font-size: .95em;
  }
   :lang(en).text4 {
    font-size: .8em;
  }
}

@media only screen and (max-width: 500px) {
  .container {
    display: grid;
    font-size: 1em;
    max-width: 100%;
    height: 100vh;
    grid-template-columns: 1fr;
    grid-template-areas: "nav" "header" "intro" "img1" "img2" "img3" "img4" "footer";
  }
  header img {
    width: 100%;
  }
  .intro {
    margin: 10px;
  }
  .img1 img {
    width: 100%;
    text-align: center;
  }
   :lang(ko).text1 {
    font-size: .7em;
  }
   :lang(en).text1 {
    font-size: .6em;
  }
  .img2 img {
    width: 100%;
    text-align: center;
  }
  .img3 img {
    width: 100%;
    text-align: center;
  }
  .img4 img {
    width: 100%;
    text-align: center;
  }
   :lang(ko).text4 {
    font-size: .85em;
  }
   :lang(en).text4 {
    font-size: .6em;
  }
}

它是第二块的示例