Classe 'view-more'

Lezione 19 di 31 del corso Card 3D | Progetto front-end di Coddy.

Sfida

Facile

Seleziona la classe ‘view-more’ in ‘bottom’:

Imposta display su Flex
Imposta align-items su center.
Imposta justify-content su flex-end.
Imposta la larghezza su 40%.

Aggiungi:

transition: all 0.2s ease-in-out;

Aggiungi anche l’effetto al passaggio del mouse (Importante):

.bottom .view-more:hover {
  transform: translate3d(0, 0, 10px);
}

Provalo tu

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Scrivi il codice HTML qui -->
        <script src="script.js"></script>
    </body>
</html>

Esercitati da solo: Playground Web

Classe 'view-more'

Tutte le lezioni di Card 3D | Progetto front-end