1
我正在構建一個3x3的縮略圖網格。 「懸停」效果使縮略圖增長。但是畫廊中的其他圖像移出或放在正在增長的圖像之下。我該如何解決它？更改圖像大小懸停，使其他圖像包裝
如果有一個CSS解決方案，那就太好了。否則，我打算使用jQuery。
.galeria {
margin-top: 15px;
width: 400px;
height: 520px;
border: 3px solid black;
border-radius: 15px;
}
#vis2 {
text-align: center;
}
.imgs {
display: inline-block;
margin-left: 20px;
}
.despliegue {
width: 95px;
height: 95px;
border: 3px dashed yellow;
border-radius: 100%;
padding: 10px 10px 10px 10px;
align-items: center;
margin-top: 15px;
position: sticky;
}
.despliegue:hover {
width: 140px;
height: 140px;
position: static;
}
.pieimg {
display: none;
}
.despliegue:hover + .pieimg {
display: block;
font-style: normal;
position: absolute;
}<div class="galeria">
<h4 id="vis2">Dale un vistazo a las notas relevantes</h4>
<div class="imgs">
<img class="despliegue" src="images/aurora.jpg">
<p class="pieimg">Aurora gana premio !en Europa¡</p>
<img class="despliegue" src="images/bio.jpg">
<p class="pieimg">Bioshock se posiciona</p>
<img class="despliegue" src="images/amazon.jpg">
<p class="pieimg">Amazon, vuelve a dar de que hablar</p>
</div>
<div class="imgs">
<img class="despliegue" src="images/guerra.png">
<p class="pieimg">Microsoft, Android y Apple ¿Quien lleva cabeza?</p>
<img class="despliegue" src="images/windows.png">
<p class="pieimg">Windows 10. Te damos consejos</p>
<img class="despliegue" src="images/carlos.jpg">
<p class="pieimg">Carlos Sadness dice que podría venir a LATAM para 2015</p>
</div>
<div class="imgs">
<img class="despliegue" src="images/las_ventajas.jpg">
<p class="pieimg">Nota de: Película</p>
<img class="despliegue" src="images/mcw.png">
<p class="pieimg">Microsoft ataca con nueva <b>Surface</b>
</p>
<img class="despliegue" src="images/netflix.png">
<p class="pieimg">El éxito detras de tan famosa plataforma</p>
</div>
</div>
如果不需要懸停功能，使用共同的功能是在上會出現一個彈出打開圖像。 – apohl
可能的重複[網格佈局：創建CSS所以元素保持位置當相鄰的元素被調整大小]（http://stackoverflow.com/questions/22790933/grid-layout-create-css-so-elements-keep-position-when -adjacent元件-得到清晰度） – showdev