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; }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Il nuovo controllo Range di Blazor 9
Usare il colore CSS per migliorare lo stile della pagina
Gestione file Javascript in Blazor con .NET 9
Montare Azure Blob Storage su Linux con BlobFuse2
Recuperare App Service cancellati su Azure
Managed deployment strategy in Azure DevOps
Referenziare un @layer più alto in CSS
Ordinare randomicamente una lista in C#
Creare una libreria CSS universale: Nav menu
Supportare la sessione affinity di Azure App Service con Application Gateway
Creare una libreria CSS universale: Cards
Configurare il nome della run di un workflow di GitHub in base al contesto di esecuzione