Jeg kan jo slet ikke få nok af de nye muligheder der åbnes op for i CSS level 3. Jeg ved godt det kun er ret få dage siden jeg sidst smed en galleri-side op over mine PS3 spil. En side jeg var ret vild med faktisk – Men som en kammerat sagde til mig. ”Hvis du brugte span mere kun du sq sy din egen spandex dragt!”

Ehrem… Det har jeg så taget til mig og lavet et nyt galleri… – Denne gang uden en eneste span i miles omkreds!

Jeg vidste at jeg stadig ville bruge muligheden for hover i ren CSS (bare fordi jeg syntes det er blæret) og det i ser nu, er hvad der kom ud af det. Til dem der syntes sådan noget kode skrammel er sjovt, så kan i hente min kode – og selv lege løs. Det eneste jeg ønsker er, at i overholder det nedenstående.

CSS3 Hoverlight Galleri

OBS: Min kode er til frit brug, så gør hvad du har lyst til med den til dine egne projekter. Det eneste jeg beder om er, at du ikke deler koden via template-deling. Hvis du ønsker at sprede ordet, vil jeg blive glad hvis du bare linker til dette sted. – På den måde får folk også altid den mest up-to-date version af koden, testet på de fleste større browsere.

Jeg er lige blevet færdig med at tygge mig igennem Trancending CSS samt læse op på de nye regler og muligheder i CSS level 3, og jeg ”tror” at jeg nu har nogenlunde styr på hvordan absolute og relativ positionering (ikke) virker i Internet Explorer. Jeg har derfor makket lidt med denne kode, der er endt med at være en super-let (8kb) roll-over foto galleri. – Der udelukkende bruger valideret CSS level 3 og XHTML 1.1 …

Se eksempel Her | Download koden Her (689 kb. inkl. billeder)

Det bruger et anker-link, fordi det er det eneste Internet Explorer tillader psuedo-classen :hover at virke med. Mens mit eksempel bruger links til spillenes/producenternes spilsider (og i den downloadede version ankeret ”#”, så kan dette nemt rettes til et link til et billede i fuld størrelse, eller til en hjemmeside, – hvis du vælger at bruge koden til et portofølge. Lige nu bruger den bare billeder af covers til Playstation 3 spil på min reol.

Jeg har valgt at kalde koden CSS3 Hoverlight, da det minder lidt om den fremvisning som Lightbox bruger. Idet det jo kalder et større billede frem uden at ændre nuværende vindue, eller kalde nyt vindue / faneblad frem.

CSS3 Hoverlight virker med JavaScript slået fra, da det jeg har brygget er ren CSS og XHTML. Ligeledes vil de kyndige jo sikkert også hurtigt notere sig den nævnte mangel på spans.

Det er testet i de seneste større browsers, og virker perfect i Camino, FireFox, Opera samt Safari. Jeg går ud fra at det derfor virker i de fleste Gecko baserede browsere,  (Jeg må indrømme at IE ofte går fuldstændig henover mit hoved i stupiditet, men det ’burde’ virke. Test på egen risiko

Jeg vil meget, meget, meget  gerne høre hvis det ikke skulle være tilfældet. Med alt det af vejen, så er her hvordan det hele virker…

Alt magien sker på a:hover, når .preview i linket går fra display: none; til display:block; med absolut positionering samt negative værdier for top og venstre. I gode browsere er det positioneret ifølge den indeholdte li, der er sat til dislay: relative (men i IE, vil betingede comments placere det på det indeholdte a href.

Pga. forskellighederne i border / padding, er det offset sat til side i IE6. Dette retter op på de mindre dimensioner på linket. – Tilsvarende den totale bredde for billedet plus dens kant og padding. Jeg har prøvet bare at bruge -50% til både top og venstre, men Opera lader til at få forstoppelse af procent værdierne. – Desuden fortrækker jeg de absolutte værdier, men lad være med at bombardere mig med det – Jeg har prøvet

For at spare på load tiden, bruger jeg kun ét billede til både thumbnail og rollover billedet, men du kan nemt bruge et separat billede for hver instance, hvis du fortrækker. – Det kommer sikkert an på om det lidt kornede ved tvungne værdier på dimensioner generer dig eller ej. Grunden til at jeg loader hvert billede to gange i stedet for bare at ændre dimensioner til en større /mindre pixelværdi ved rollover, er pga. det skift det vil give i side-layout. Så selv om der er en smule ekstra kb. download. Så er det sq mange gange bedre end at bruge pre-cache med JavaScript.

Anyway, hvis i bruger min kode, vil jeg selvfølgelig også gerne se resultatet