domenica 27 Settembre 2020

Download in corso

Softwareone.it

06-01-2019

Caption Hover Effects

Caption Hover Effects una griglia di figure con effetto hover che rivelano una didascalia con il titolo, l’autore e un pulsante di collegamento.

Per alcuni degli effetti useremo trasformazioni 3D.

L’obiettivo è quello di mantenere gli effetti sottili e di fornire ispirazione per molte varianti diverse.

La struttura sarà costituito da una lista non ordinata ed ogni articolo conterrà una figura elemento.

Il figure conterrà un’immagine e fig caption con alcuni elementi di testo e un link:

Questa è la struttura predefinita per tutti gli esempi di griglia.

<ul class="grid cs-style-1">
    <li>
        <figure>
            <img src="images/1.png" alt="img01">
            <figcaption>
                <h3>Camera</h3>
                <span>Jacob Cummings</span>
                <a href="http://dribbble.com/shots/1115632-Camera">Take a look</a>
            </figcaption>
        </figure>
    </li>
    <li>
        <figure>
            <!-- ... -->
        </figure>
    </li>
    <!-- ... -->
</ul>

Notare che l’utilizzo di una figura ha senso solo se non costituisce il contenuto principale in sé, ma se fa riferimento al flusso principale del documento.

Gli stili comuni per tutte le figure è il seguente.

.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;
}
.grid figure {
    margin: 0;
    position: relative;
}
.grid figure img {
    max-width: 100%;
    display: block;
    position: relative;
}
.grid figcaption {
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    background: #2c3f52;
    color: #ed4e6e;
}
.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;
}

Alla fine del CSS ci sarà anche una media query per schermi di piccole dimensioni.

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

Esempio

Scarica Esempio

I commenti sono chiusi.

Pubblicità