Change image size on hover, makes other images wrap

Question

I'm building a 3x3 grid of thumbnails. A 'hover' effect makes the thumbnails grow. But the other images in the gallery move out or under the one that is growing. How can I fix it?

If there's a CSS solution, that would be great. Otherwise, I'm open to using 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

It's spilling on to the next line because the container div is not big enough to hold the new larger img along with the other two.

By increasing the width on .galeria to something like 450px, it eliminates this issue.

Add width: 450px; to .galeria, adjust the width until it looks right. :)

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