ciao Luca e benvenuto,
partiamo dal codice di esempio originale.
non mi dilungo in spiegazioni ma ti faccio subito un'esempio pratico di modifica:
alla classe .container aggiungi float:left;
per ogni immagine che intendi inserire rifatti all'esempio qui sotto:
codice:
css
.container {
position: relative;
width: 50%; /* questo valore cambialo in base alle tue esigenze */
float:left;
}
html
<div class="container">
<img src="img_uno.png" alt="AvatarUno" class="image">
<div class="overlay">
<div class="text">Hello World UNO</div>
</div>
</div>
<div class="container">
<img src="img_due.png" alt="AvatarDue" class="image">
<div class="overlay">
<div class="text">Hello World DUE</div>
</div>
</div>
dovrebbe essere tutto chiaro...