翻轉圖像，不同的圖像出現在下面

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

我改變你的標記位作爲以使其更加語義化。看看這個例子，讓我知道如果這有助於:)