悬停时更改图像大小，使其他图像换行

Question

我正在构建一个3x3的缩略图网格。 A＆＃39;悬停＆＃39;效果使缩略图增长。但是画廊中的其他图像会移出或移出正在增长的图像。我该如何解决？

如果有CSS解决方案，那就太好了。否则，我愿意使用jQuery。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

View on CodePen

Answer 1

它会溢出到下一行，因为容器div不足以容纳新的更大的img以及其他两个。

通过将.galeria的宽度增加到450px，可以消除这个问题。

添加宽度：450px;到.galeria，调整宽度直到看起来正确。 ：）

＆＃13;

＆＃13;

.galeria {
    margin-top: 15px;
    width: 450px;
    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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;