Question

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

}

Answer 1

类丢弃需要是位置：相对而drop-content需要两个参数 - top：0;左：100％;

Answer 2

也许这会对你有所帮助

JS Fiddle

我在这里做了更改：

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

想要将画廊图像打开到侧面而不是下方

2 个答案: