Bilder med filter

Lag et nytt prosjekt - kall det sepia - lag sepia.html og last inn 12 bilder i mappa bilder.
Lag sepia.css og koble den til html filen din.

Skriv inn følgende html: (bruker emmet abbreviation)

div#bilder
  div.bilde*12

Du skal nå ha 12 div-er med klassen bilde inne i en div med id=bilder.

Lag følgende css:

#bilder {
    display: flex;
}

.bilde {
    background-size: contain;
    background-position: center;
    min-height: 200px;
    background-repeat: no-repeat;
    filter: sepia(80%);
    flex: 1;
    transition: 3s;
}

.bilde:hover {
    filter: sepia(0%);
    flex: 5;
}

div.bilde:nth-child(1) {
    background-image: url("bilder/b1.jpg");
}
....

Gjenta den siste regelen slik at hver div.bilde får riktig bilde (antar at bildene har navn b1 ... b12).
Du trenger da bare endre tallet 1 til riktig verdi.

Du skal nå ha et album som viser "gamle bilder" som kommer fram og blir fargerike når markøren er over dem.