Can't display Btn - Image Gallery

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:

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!

Hi Ricardo :wave:

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.

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

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.

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.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.