帮助需要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;}