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

Question

我试图做一个图像的网格，一旦你悬停在一个，它的网页标题出现在它下面，以及其周围的其他图像改变不透明度。

我设法创建了我想要的不透明鼠标悬停效果，但是现在我无法在将鼠标悬停在相应图像上时使页面标题图像显示出现问题。我希望这是有道理的

希望有人可以提供帮助。这里是我的代码

HTML：

<div style="position: relative; left: 140px; top: 0px;"> 
     <img src="window.jpg" style="position: relative; top: 0; left: 0;"/> 
    <div id="windowimages"> 
    <a class="image-one"></a><a href="https://example-site.com/music/"> 
     <img src="pic1.jpg/> 
     <a class="image-two"></a><a href="https://example-site.com/dance/"> 
     <img 
    src="pic2.jgp"/> 
     <a class="image-three"></a><a href="https://example-site.com/art/"> 
     <img 
    src="pic3.jpg" /> 
     <a class="image-four"></a><a href="https://example-site.com/aboutus/"> 
     <img 
    src="pic4.jpg"/> 
     </div> 

CSS：

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; 
} 

Answer 1

如果我理解正确的你，好像你想要做的就是添加一个标题到每个图像上悬停。

看看这个例子中，我写道：http://jsfiddle.net/arthurcamara/chbsL3pq/

的关键部分，添加标题为.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; 
} 

我改变你的标记位作为以使其更加语义化。看看这个例子，让我知道如果这有助于:)