Creare un caption hover effect originale

DEMO | DOWNLOAD

Oggi vediamo come creare un effetto originale al passaggio del mouse su un’immagine o testo per rendere ancora più accattivante la user experience del nostro utente.
Vogliamo creare un effetto al mouse over in modo che l’immagine si alzi e ci faccia vedere una eventuale descrizione o eventuali link.

Spesso nella creazione di website e soprattutto nello sviluppo di un portfolio è molto difficile decidere che caption hover effect utilizzare su i thumbnails inseriti.

Qui di seguito un esempio di caption hover effect molto semplice da inserire nella tua pagina web per dare un effetto del tutto nuovo e molto elegante per approfondire la descrizione della immagine da mostrare.

Prima di iniziare, devo fare un grande ringraziamento all’autore (Jacob Cummings) che ci ha messo a disposizione le icone utilizzate in questo breve tutorial.

Partiamo!
[divider_1px]

DEMO | DOWNLOAD

Il Markup

La struttura è una semplice griglia ordinata fatta da immagini proprio per ricreare una sorta di wall di foto o portfolio, seguendo gli standard del moderno web design.

Fotocamera
Tizio
Download

Questo é l’esempio per una singola immagine che ho inserito in un “li“, puoi replicarla, cambiando immagine per ogni altro “li“.

Tutte le immagini che inserirai qui dentro avranno tutte la stessa classe “grid cs-style-2“, per avere un’altra serie di immagini con un effetto diverso, ti basta attribuirgli una classe diversa che andrai a definire nel CSS.

Style CSS

Bisogna attribuire un foglio di stile con le varianti comuni ad ogni elemento, come la nostra griglia, ovvero “grid“:

.grid {
    padding: 20px 20px 100px 20px;
    max-width: 1300px;
    margin: 0 auto;
    list-style: none;
    text-align: center;
}

.grid li {
    display: inline-block;
    width: 440px;
    margin: 0;
    padding: 20px;
    text-align: left;
    position: relative;
}

Inserendo il “display: inline-block” riusciamo a centrare ogni nostro “li” che compone la griglia.
Adesso passiamo all’immagine, definendo i bordi:

.grid figure {
    margin: 0;
    position: relative;
}

Adesso inseriamo le specifiche della nostra immagine per il resize all’interno della nostra “grid”:

.grid figure img {
    max-width: 100%;
    display: block;
    position: relative;
}

E ora il nostro caption, che dovrà avere una posizione assoluta:

.grid figcaption {
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    background: #2c3f52;
    color: #ed4e6e;
}

E infine diamo lo stile agli elementi che conterrà il nostro caption (in questo caso ho inserito solo del testo):

.grid figcaption h3 {
    margin: 0;
    padding: 0;
    color: #fff;
}

.grid figcaption span:before {
    content: 'by ';
}

.grid figcaption a {
    text-align: center;
    padding: 5px 10px;
    border-radius: 2px;
    display: inline-block;
    background: #ed4e6e;
    color: #fff;
}

Gli elementi essenziali gli abbiamo definiti e gli abbiamo attribuito il nostro stile. Mi sono dimenticato le media queries per i dispositivi mobile.
Inseriamole subito:

@media screen and (max-width: 31.5em) {
    .grid {
        padding: 10px 10px 100px 10px;
    }
    .grid li {
        width: 100%;
        min-width: 300px;
    }
}

Eccoci alla fine!
Adesso si può fare sul serio e quindi definire via CSS il nostro effetto sull’immagine, ovvero il nostro cs-style-2:

.cs-style-2 figure img {
    z-index: 10;
    transition: transform 0.4s;
}

.no-touch .cs-style-2 figure:hover img,
.cs-style-2 figure.cs-hover img {
    transform: translateY(-90px);
}

Ho definito che l’effetto avvenga al passaggio del mouse, il buon vecchio mouse over.
Siccome vogliamo che l’immagine si alzi per farci leggere la nostra descrizione, dobbiamo definire la larghezza e l’altezza:

.cs-style-2 figcaption {
    height: 90px;
    width: 100%;
    top: auto;
    bottom: 0;
}

E adesso definiamo la posizione di un eventuale bottone per gli approfondimenti che vorremmo dare: