Can't display Btn - Image Gallery

[ricardoaguilarm]

I’m doing a Image Gallery such as Wes Bos tutorial but doing almost all in my way, changing the CSS, and HTML. But It’s a little bit difficult archive some functionalitys. For example:

• I can’t display the button “x” (close) when the image is fully display. I don’t know what is happening.
• I don’t know why image number 6 (and others) don’t fully display when every image and div has the same properties.
• Can’t imagine better CSS Class name (I accept advice and suggestions).

My project:
CODEPEN: https://codepen.io/ricardorien/pen/ExZgpyQ?editors=0100

Wes Bos Tutorial and Code:
Youtube: CSS GRID: Image Gallery Exercise — 20 of 25 - YouTube
GitHub Code (CSS and JS inside HTML file): css-grid/20 - CSS Grid Image Gallery at master · wesbos/css-grid · GitHub

Thanks in advance!

[miku86]

Hi Ricardo

@ricardoaguilarm

I don’t know why image number 6 (and others) don’t fully display when every image and div has the same properties.

When you have a look at the dev tools, you will find this for the broken images:

You should check out how you fetch this src, e.g. by having a look into your handleClick-function.

@ricardoaguilarm

Can’t imagine better CSS Class name ( I accept advice and suggestions ).

There are various ideas about that, e.g. BEM.

@ricardoaguilarm

I can’t display the button “x” (close) when the image is fully display. I don’t know what is happening.

First of all, the button has display: none, so you don’t show it. Then, you can add a z-index to show your button. You also have to add a small addition, you can find a solution here.

[ricardoaguilarm]

Well, my handle function? I Have to work on that! but it’s pretty weird, everythings it’s have the same struture.

Yes, B.E.M It’s nice but i don’t know how to call all that div’s (layers).

Thanks! That article helps!.
I’m gonna updade the Codepen, if you wanna check out my solution, or my aproach.