Bild-Overlay im Multi-Layer Grid

 

Viele Wege eine Bildvorlage in ein Grid zu überführen.

Beispiel HTML welches 6 unterschiedliche Grids

 
- Bild Konturen 120x120
- Alphabet Raster 120x120
- Alphabet Kreis 15x120
- Bild Konturen 140x140

- Hexagon Grid 120x120

Farbige Punkte 120x120

- 
vereint. Wird beim Anklicken geöffnet.

Ich nutze für dieses Beispiel ein öffentlich zugängliches und rechtefreies Bild der Mona Lisa.

als erstes das Rechteck-Grid Auflösung 32 x 32 :

Hexagon Grid 32x32 

Kubus Grid 32x32

Pentagon Grid 15x13

     Farbige Punkte Grid 32x32 vor weißem Hintergrund

Farbige Punkte 64x64 vor schwarzem Hintergrund

Alphabet Raster Grid 120x120

Bild Konturen

Alphatbet Kreis Grid 15x120