I have little to do at work at the moment and would like to use the time to build a website for myself.

I'm not making any progress because I don't really know how to put my idea into practice. I would like to arrange my projects in a table, as soon as the mouse pointer moves over one of the projects a picture should be displayed on the page. The pictures for the different projects should be distributed in a grid on the page-an exemplary picture can be found below.



What is the best way to do this? I suspect that I would have to build the actual page with cssgrid and arrange the images for the projects in a subgrid - does that make sense? But since I'm just taking my first steps in web design, I'm a bit "afraid" of this implementation.

@alt3 I'd advise to start with something simpler, even if not as pretty as that example. Make something that is easy for you to add content to so that you will still use it in 3 months. Good looking pages can come later :)

@electret @alt3 what antoine said, but the all data down into a <ul><li></li></ul>, put that on a repo somewhere and we'll help you style it :)

@neauoire @electret @alt3 I second this, the hardest part isn't designing or coding but finding a system that suits you so you don't hate updating your website.

As for your design code, don't overthink it too much with subgrids, a simple grid and absolute positionning is enough: codepen.io/anon/pen/zgxzOx

@thomasorus @neauoire @electret I found a way for implementation. I assigned a fixed position to the graphics, set the position using top/left and moved the graphics to the background using the z-value. Thank you all very much for your fast support! And special thanks to @thomasorus for the code!

I will now clean up the page and comment out so that I still understand on the weekend what I have done there.

@thomasorus @neauoire @electret

The graphics are jumping if the width changes, but right now I am glad that I have come so far today:).



Sign in to participate in the conversation

Merveilles is a community project aimed at the establishment of new ways of speaking, seeing and organizing information — A culture that seeks augmentation through the arts of engineering and design. A warm welcome to any like-minded people who feel these ideals resonate with them.