Effetti animati per mostrare del testo sopra una immagine in puro CSS

Sono sicuro che avevi gia  visto parecchie volte apparizioni spettacolari di testo sopra immagini al passagio del mouse. Molto spesso, questi effetti vengono utilizzati per le anteprime nelle gallerie o miniature, meno spesso su immagini grandi. Un altro suo utilizzo puo essere anteprima di un prodotto in un negozui online mostrando in tal modo delle informazioni aggiuntive.

Oggi voglio mostrarti alcuni interessanti effetti che permettono di mostrare del testo (didascalie) sopra immagini al passagio del mouse (in CSS questo stato di un elemento si chiama hover ), usando esclusivamente CSS senza usare javascript. Testo apparira su uno sfondo semitrasparente, scivolando da diversi lati delle miniature, dall'alto, dal basso, dai lati e dagli angoli dell'immagine come in uno slider.

 

Vediamo subito esempio reale

Per vedere l'effetto passa con il mouse sopra una qualsiasi immagine

Titolo

Breve descrizione del'immagine

Titolo

Breve descrizione del'immagine

Titolo

Breve descrizione del'immagine

Titolo

Breve descrizione del'immagine

Titolo

Breve descrizione del'immagine

Titolo

Breve descrizione del'immagine

Titolo

Breve descrizione del'immagine

Titolo

Breve descrizione del'immagine

E ora vediamo come viene realizzato  

HTML

Come la base per  contenitore per le immagini e le didascalie, si utilizza  l'elemento di blocco <div>, al tag aggiungeremo una classe con  il nome del selettore, e nel foglio di stile, ridefiniamo come apparirà il nostro contenitore, le immagini, così come organizziamo le didascalie  e aggiungeremo a loro un po di movimento.
   Per le didascalie, anche  useremo un contenitore creato con aiuto del tag <div> , collocandolo all'interno dell'unità genitore con l'immagine.
   Poiché abbiamo diversi effetti da mostrare, allora a ciascun contenitore assegneremo una classe diversa: caption-1, caption-2, ecc
   Successivamente, per applicare questo o quell'effetto, sarà sufficiente cambiare queste classi. Per chiarezza, qui sotto mostrerò un frammento del codice per due contenitori :

<div class="image-container">
    <img src="/images/css/anim_didascalie/1.jpg"/>
    <div class="image-caption caption-1">
      <h2>Titolo</h2>
      <p>breve descrizione dell'immagine</p>
    </div>
</div>
 
<div class="image-container">
    <img src="/images/css/anim_didascalie/2.jpg"/>
    <div class="image-caption caption-2">
      <h2>Titolo</h2>
      <p>breve descrizione dell'immagine</p>
    </div>
</div>

Come potresti  vedere, la struttura e la disposizione degli elementi è piuttosto semplice, all'interno del contenitore div per la didascalia, posizioniamo l'intestazione di secondo livello (tag <h2>) e una breve descrizione dell'immagine all'interno dei tag <p> </ p>.
 Il design del titolo e della descrizione, vediamo di gestire nel foglio di stile, cui il contenuto, vediamo piu in basso.

 

CSS

Non entrerò tanto nelle spiegazioni . Per capire cosa, dove e perché, il codice posiede piccoli commenti, quindi non sarà difficile da capire.
 Il contenitore base class = "image-container" imposta larghezza width: 250px;  e altezza height: 200px; , determiniamo la posizione con  position: relative;  e usando la proprietà box-shadow è stata aggiunta una leggera ombra esterna . Immagini e didascalie posizionati con auito del  position: absolute; , e la larghezza e l'altezza impostiamo al 100% dalla grandezza del contenitore con immagine, nel nostro caso, per  occupare tutta la sua regione.
Gli elementi chiave nella realizzazione di effetti di scorrimento sono pseudo classe :hover  e la proprietà transition , per mezzo della quale noi stabiliamo gli effetti della transizione tra due stati di didascalie, sono nascosti al inizio , e al passaggio del mouse sopra l'immagine appaiono da un lato o altro.
Ricordo che è la pseudo-classe: hover che gestiche questi stati.

 

Cliccare par aprire lo spoiler e vedere il codice css

/* contenitore base */
.image-container {
    width: 250px;
    height: 200px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    display: inline-block;
    margin: 10px;
    -webkit-box-shadow: 2px 2px 50px rgba(0,0,0,0.6);
    -moz-box-shadow: 2px 2px 50px rgba(0,0,0,0.6);
    box-shadow: 2px 2px 50px rgba(0,0,0,0.6);
}
 
/* immagine al interno del contenitore */
.image-container img {
    width: 100%;
    height: 100%;
    position: absolute;
}
 
/* contenitore con didascalia */
.image-container .image-caption {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    font-family: 'Open Sans',sans-serif;
    text-align: center;
}
 
/* titolo */
.image-caption h2 {
    margin-top: 50px;
    color: #fffefe;
    font-weight: 300;
}
 
/* descrizione dell'immagine  */
.image-caption p {
    color: #fff;
}
 
/* Tipi di animazioni apparizione didascalie */
 
/* animazione da sinistra*/
 
.image-container .caption-1 {
    left: -260px;
    transition: all 0.5s;
}
.image-container:hover .caption-1 {
    left: 0;
    transition: all 0.5s;
}
 
/* animazione da sopra */
.image-container .caption-2 {
    top: -210px;
    transition: all 0.5s;
}
.image-container:hover .caption-2 {
    top: 0;
    transition: all 0.5s;
}
 
/* animazione da basso */
.image-container .caption-3 {
    bottom: -210px;
    transition: all 0.5s;
}
.image-container:hover .caption-3 {
    bottom: 0;
    transition: all 0.5s;
}
 
/* animazione da destra */
.image-container .caption-4 {
    right: -260px;
    transition: all 0.5s;
}
.image-container:hover .caption-4 {
    right: 0;
    transition: all 0.5s;
}
 
/* animazione dall'angolo in alto a sinistra  */
.image-container .caption-5 {
    left: -260px;
    top: -210px;
    transition: all 0.5s;
}
.image-container:hover .caption-5 {
    left: 0;
    top: 0;
    transition: all 0.5s;
}
 
/* animazione dall'angolo in alto a destra */
.image-container .caption-6 {
    right: -260px;
    top: -210px;
    transition: all 0.5s;
}
.image-container:hover .caption-6 {
    right: 0;
    top: 0;
    transition: all 0.5s;
}
 
/* animazione dall'angolo in basso a sinistra */
.image-container .caption-7 {
    left: -260px;
    bottom: -210px;
    transition: all 0.5s;
}
.image-container:hover .caption-7 {
    left: 0;
    bottom: 0;
    transition: all 0.5s;
}
 
/* animazione dall'angolo in basso a destra */
.image-container .caption-8 {
    right: -260px;
    bottom: -210px;
    transition: all 0.5s;
}
.image-container:hover .caption-8 {
    right: 0;
    bottom: 0;
    transition: all 0.5s;
}

 

Questo è tutto!
In conclusione, voglio solo ricordarti che puoi usare sia l'intero set di effetti, sia  singolarmente, basta cambiare la classe nella didascalia, del 'effetto che ti piace.

Lasciaci il tuo commento qui sotto, sono sempre graditi.

Letto 373 volte