Css 翻转图像，不同的图像出现在下面

我正在尝试制作一个图像网格，一旦你将鼠标悬停在其中一个图像上，它的网页标题就会出现在它的下方，同时它周围的其他图像的不透明度也会发生变化

我已经成功地创建了我想要的不透明度鼠标悬停效果，但是现在当你将鼠标悬停在相应的图像上时，我很难让页面标题图像显示出来。我希望这是有道理的

希望有人能帮忙。这是我的密码

HTML:

---

如果我没弄错的话，看起来你想做的就是给悬停的每张图片添加一个标题

看看我写的这个例子：

添加标题的关键部分是

。image:hover:after

，您可以在上面和下面的代码中看到：

.grid:hover .image:hover:after {
    display: block;
    position: absolute;
    top: 5px;
    width: 90px;
    padding: 5px;
    content: attr(data-title);
    text-align: center;
    background-color: #333;
    color: #fff;
}

---

我也对您的标记做了一些修改，使其更具语义。查看示例并让我知道这是否有帮助：）

澄清您想要什么？非常感谢Arthur！！这或多或少是我想要的：）只是现在要调整标题文本的位置虽然这样做有效，但我意识到我更喜欢页面标题显示在网格图像下方，并且在相同的位置。我已经创建了我想要显示的文本图像，所以本质上我想知道的是如何将鼠标悬停在其中一个网格图像上（如Arthur的示例所示），从而触发相应的页面标题jpg的出现？

body {
}
#windowimages {
  position: absolute;
  left: 3px;
  top: 4px;
  font-size: 0;
  width: 198px;
  margin: 0 auto;
  padding:1px;
  overflow:hidden
}
 #windowimages img {
   width:90px;
  height:90px;
   margin: 3px;
   cursor:pointer;
  -webkit-transition:opacity 0.26s ease-out;   
  -moz-transition:opacity 0.26s ease-out;   
  -ms-transition:opacity 0.26s ease-out;   
  -o-transition:opacity 0.26s ease-out;   
   transition:opacity 2s ease-in-out;  
}

#windowimages:hover img {
  opacity:0.55;
}

#windowimages:hover img:hover {
  opacity:1;
}

.grid:hover .image:hover:after {
    display: block;
    position: absolute;
    top: 5px;
    width: 90px;
    padding: 5px;
    content: attr(data-title);
    text-align: center;
    background-color: #333;
    color: #fff;
}