OPGAVE TIL HTML & CSS – MIDDEL – NTH CHILD
Opgave 5
Opgave 5 – Del 1
Start med at skrive:
< div >
< div >
< span >< /span >
< span >< /span >
< span >< /span >
< span >< /span >
</ div >
</ div >
Giv den 1. div boks en class der hedder “card1” og den 2. div boks en class, der hedder “img1”
Gå derefter ned i CSS’en og lav tilsvarende CSS styles der hedder .card1 og en der heder .card1:before
Opgave 5 – Del 2
Nu skal der laves CSS styles
.card1 {
margin-top: 10px;
border-radius: 16px;
width: 120%;
height: 360px;
background: url(https://mom2day.dk/wp-content/uploads/2021/04/Next-clue.jpg);
position: relative;
overflow: hidden;
transform: scale(75%, 75%);
}
.card1:before {
content: ” “;
position: absolute;
width: 100%;
height: 100%;
top: 0;
background-color: rgba(0, 0, 0, 0.72);
}
Sørg for at justere højden til 100%.
Her har man baggrundsbilledet i stylesheetet og ikke i html’en, hvilket også vil sige at for at justere på dens størrelse skal der justeres med en scale(); for at billedet vises fuldt. Det kan op og ned justeres alt efter størrelsen på det oprindelige billede.
Når man tager en :before eller en :after med så er det for at koble et element sammen med et andet. Læg mærke til at content er tom her fordi henviser til content i .card1(samme billede), ovenpå denne ligger en næsten fuld sort baggrundsfarve men med 0.75 synlighed.
Opgave 5 – Del 3
Nu skal vi kode de fællestræk for vores forælder og barn hhv. .card1 og .img1.
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
}
De skal ligge ovenpå hinanden fylde 100% og have flex.
Med flex er <span></span> boksene som vi kommer til at
referere til som nth-child(nummer) flexible til at
fylde ud med ved enten at vokse eller skrumpe.Opgave 5 – Del 4
Nu skal vi kode CSS’en således at vi kan klargøre til vores nth-childs(). Derfor skal card1, img1 og span have samme fællesnævner, for at lave banerne.
width: 25%;
height: 100%;
background: url(https://mom2day.dk/wp-content/uploads/2021/04/Next-clue.jpg);
transition: 0.5s;
}
Fordi der er 4 baner af billedet sætter vi den til 25% da det er 1/4 af 100. Så hvert <span></span> er 1/4 af billedet.
Opgave 5 – Del 5
Nu skal vi så til at kode nth-child() af 4 omgange, 1 for hver bane/span vi har skrevet.
background-position: 0;
transition-delay: 0;
}
.card1 .img1 span:nth-child(2) {
background-position: 33.33%;
transition-delay: 0.1s;
}
.card1 .img1 span:nth-child(3) {
background-position: 66.66%;
transition-delay: 0.2s;
}
.card1 .img1 span:nth-child(4) {
background-position: 100%;
transition-delay: 0.3s;
}
Et nth-child() betyder at n står for et tal eller et element, som referes til i (). Her er det span numre. Her er det 1. span ikke i %, da den selv skærer af og den har ingen forsinkelse på effekten. Derefter skal sættes der 1/3 % på de resterende for så til sidst at ramme 100%.
Opgave 5 – Del 6
Nu skal vi så lave html’en færdig. For vi mangler det, som skal ligge under, når billedet løftes.
< div class=”card1″>
< div class=”img1″>
< span>< /span>
< span>< /span>
< span>< /span>
< span>< /span>
< /div>
< div class=”content1″>
< h2>Dette er en < /h2>
< h2>hover effekt med span< /h2>
< h4>og nth-child(børn)< /h4>
< /div>
< /div>
content1 er baggrunden der kommer til syne når billedet løftes i baner.
Opgave 5 – Del 7
Nu skal vi kode CSS’en for mouse-over effekten.
.card1:hover .img1 > span {
transform: translateY(-100%);
}
Ved at benytte > flytter alle span efter den forrige. Alle med bevægelsen opad(Y) derfor -100%.
Opgave 5 – Del 8
Nu skal vi kode indholdet der trækkes op fra bunden af.
.content1 {
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: white;
padding: 20px 20px;
width: 100%;
height: 100%;
transform: translateY(100%);
}
Dette er en meget kompliceret måde at beskrive at der i virkeligheden blot skal være en boks hvor alt er centreret og den skal starte med at ligge 100% under positionen 0% som er der hvor den lander når vi har sat mouse-over effekten på.
Opgave 5 – Del 9
Nu skal vi kode indholdet der trækkes op fra bunden af.
.card1:hover .content1 {
transform: translateY(0%);
transition: 1s;
transition-delay: 0.1s;
}
Dette gør at når man hover/mouse-over på billedet så trækkes content1 op til normal position 0%.