Fotogalleri

Du ska skapa ett fotogalleri med bilder som ser ut att ligga utslängda på en yta. När muspekaren hålls över en bild eller om man “tabbat” till den så ska bild och bildtext förstoras.

Exempel, den andra bilden har man fört musen över en bild.

Exempel

Krav på uppgiften:

• Bildtexten ska ligga som värde på attributet ”title” på lämplig tag och inte i en separat tagg.
• Under respektive bild ska bildtexten synas. (man kan inte plocka pseudo elements från bilder…)
• Ett externt typsnitt ska laddas in och användas till texten under bilderna.
• När muspekaren hålls över en bild ska den och bildtexten förstoras (För högre betyg: Använd en pålagd övergång, transition).
• Om man använder tangentbordet och ”tabbar” till en bild (ger den fokus) ska samma sak hända som då muspekare hålls över bilden.
• Bilderna ska ha en skugga.
• Sidan ska fungera i minst en webbläsare (men gärna i flera) Ange vilka webbläsare det fungerar i när du lämnar in.

CSS-egenskaper och selektorer som du troligtvis kommer att behöva använda (läs på om dessa!):

• :after
• :hover
• :focus
• :nth-child
• attr()
• content
• transition
• box-shadow
• transform
• z-index
• font-family
• font-face

Tips:

• Övergångar med ”transitions” påverkar alla egenskaper som ändras på det objekt som har transition satt.
• Prefixen –moz-, -webkit-, -o-. behöver användas för många av egenskaperna. Exempelvis: ”-moz-transform”.
• Förutom att använda webbläsarspecifika prefix ska du använda de CSS3-standardiserade namnen, exempelvis ”transform”.
• Troligtvis vill du låta transitionen påverka samtliga egenskaper, det vill säga ”all”
• För att få ”slumpvis” fontstorlek och rotation kan du använda nth-child-selektorn för att rotera exempelvis var 3e bild -5 grader och var 5e bild 10grader etc.
• Du kommer att märka att du inte kan använda pseudoklassen ”after” och css-egenskapen ”content” på en img-tagg vilket gör att det kan vara lämpligt att lägga title-attributet på en annan tagg än img.
• Sätt position:relative; på bilderna så kommer z-index även att fungera i Chrome.
• Tänk på att många av egenskaperna är experimentella i webbläsarna vilket gör att buggar kan förekomma.
• I övrigt får du utforma sidan som du vill.
• Validera HTML5-koden och CSS-koden innan du skickar in.