想畫廊圖像開拓到一邊，而不是下面

-1

.drop { 
 
    display: inline-table; 
 
    
 
} 
 

 
.drop-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    
 
    
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    border: 1px solid #333; 
 
    
 
} 
 

 

 
.drop:hover .drop-content { 
 
    display: block; 
 

 
}

<html> 
 
<body> 
 
    <div class="drop"> 
 
    <img src="storage.jpg" alt="storage" width="200" height="150"> 
 
    <div class="drop-content"> 
 
    <img src="storage.jpg" alt="storage" width="400" height="300"> 
 
    <div class="desc">Large storage space</div> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

HTML - 它的工作原理是，當你將鼠標懸停在圖片下面它放大。我希望將圖像打開，而不是放大。這可能嗎？

<div class="drop"> 
    <img src="storage.jpg" alt="storage" width="200" height="150"> 
    <div class="drop-content"> 
    <img src="storage.jpg" alt="storage" width="400" height="300"> 
    <div class="desc">Large storage space</div> 
    </div> 
    </div>

CSS

.drop { 
    display: inline-table; 

    } 

.drop-content { 
display: none; 
position: absolute; 
background-color: #f9f9f9; 


box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
border: 1px solid #333; 

} 


.drop:hover .drop-content { 
display: block; 

}

來源

2016-11-16 Jack Toffolo