Come abbiamo già visto in script precedenti, le immagini sono da sempre elementi ostici da gestire. Per la nostra libreria ci affideremo alle classi fornite dal framework CSS prescelto ed andremo solo ad aggiungere una punta di interattività.

Possiamo riutilizzare gli effetti di box-shadow visti con le card, ma anche creare un effetto zoom-in al passaggio con il mouse. Il procedimento è simile all'applicazione dell'ombra, ma per non andare a rompere il layout grafico, inseriamo l'immagine in un contenitore a dimensione fissa, in questo modo l'immagine risulterà ingrandita, ma i contorni della stessa rimangano invariati.

<div class="image-container">
    <img src="https://placehold.co/300x200" alt="Immagine di esempio">
</div>

.image-container {
  position: relative;
  width: 300px;
  overflow: hidden;
}

.image-container img {
  transition: transform 0.3s ease;
}

.image-container:hover img {
  transform: scale(1.1);
}

Proseguendo il confronto con le card, possiamo anche inserire del testo in overlay, in questo caso, essendo un'immagine, la rotazione non è consigliata, quindi manteniamo lo zoom-in ed aggiungiamo del testo sopra una barra colorata per contrastare con il contenuto dell'immagine.

<div class="image-container">
    <img src="https://placehold.co/300x200" alt="Immagine di esempio">
    <div class="overlay-text">Testo Overlay</div>
</div>

.overlay-text {
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
  transform: translate(-0%, -50%);
  color: white;
  font-size: 1.5rem;
  padding: 10px 0;
  background-color: rgba(0, 123, 255, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-container:hover .overlay-text {
  opacity: 1;
}