悬停时更改图像大小，使其他图像环绕

Question

我正在构建一个 3x3 的缩略图网格。 'hover' 效果使缩略图变大。但是画廊中的其他图像移出或移到正在增长的图像下方。我该如何解决？

如果有 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>

View on CodePen

Answer 1

它溢出到下一行，因为容器 div 不够大，无法容纳新的更大的 img 和其他两个。

通过将 .galeria 的宽度增加到 450px 之类的值，可以解决这个问题。

添加宽度：450px； .galeria，调整宽度直到看起来合适。 :)

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

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

悬停时更改图像大小，使其他图像环绕

Change image size on hover, makes other images wrap

html

css

hover