幫助需要CSS懸停圖像

Question

我正在學習CSS的過程。

我想在用戶將鼠標懸停在畫廊中時在屏幕中間顯示圖像。

但是，圖像懸停在圖像本身。 這是我的代碼。

jsfiddle.net/y9w5ym72/1/

body { 
     margin: 0; 
     padding: 0; 
     background: #EEE; 
     font: 10px/13px 'Lucida Sans',sans-serif; 
    } 

.wrap { 
     overflow: hidden; 
     margin: 50px; 
    } 

.box { 
     float: left; 
     position: relative; 
     width: 25%; 
     padding-bottom: 25%; 
     color: #FFF; 

    } 

.boxInner { 
     position: absolute; 
     left: 30px; 
     right: 30px; 
     top: 30px; 
     bottom: 30px; 
     overflow: hidden; 
     background: #66F; 

    } 

.boxInner img { 
     width: 100%; 
    } 




.thumbnail:hover img{ 
border: 1px solid transparent; 
} 


.thumbnail span{ 
position: absolute; 
padding: 5px; 
left: -1000px; 
visibility: hidden; 
color: black; 
text-decoration: none; 
} 


.thumbnail span img{ 
border-width: 0; 
width:70%; 
height: auto; 
padding: 2px; 
} 

.thumbnail:hover span{ 

visibility: visible; 
top: 0; 
left: 230px; 
z-index: 50; 
} 

Answer 1

第一點是你需要隱藏第一張圖像。所以只有你可以看到第二個。第二點是內部跨度不需要position:absolute, left:-1000px;款式。

.thumbnail:hover > img{ 
    border: 1px solid transparent; 
    display:none; 
    } 


    .thumbnail span{ 
    /*position: absolute; 
    left: -1000px;*/ 
    padding: 5px; 
    visibility: hidden; 
    color: black; 
    text-decoration: none; 
    } 

DEMO

Answer 2

，你必須使用的位置是：絕對以達到fiddle

.box:hover{position:absolute; top:38%; left:38%; z-index:200;}