The problem I can not resolve is placed at JS.js file.
It should work as follows - 2 steps: step 1: you click an image (.imagenes), its opacity goes down to 0.1 and other info (.logo) pops up from behind the image. step 2:: you click again on .logo, it gets hidden again and the image pops up again full opacity.
What happens is that step 1 works but step 2 does not.
Can any body give me a hand to resolve this? I am just burnt after researching trying and testing quite a lot of things whith no joy.
I cannot tell you what’s wrong with your current code since you haven’t posted it here. The easiest way to achieve what you described would be to toggle the parent container’s class on click and then style the children with CSS/SCSS, like:
What you try to do is really simple, your initial approach is rather complicated. And it will never reverse.
So you should try the approach I suggested as it is much easier.
Also: you just need to change the opacity of the image – not the logo, if I understand your idea correctly? The logo would be hidden behind the image anyway, right? So you would just need to toggle the class on the image.
No need to set the opacity with JS. Just toggle the class ‘visib’ on click and do the opacity with CSS. Leave the logo image container as it is.
Yes you understand my idea correctly mirja_t. Muchas gracias for answering!
Why will it never reverse? Is it because (I think) I am not specific on the second click being it on .logo? Would you please explain that?
Is that the reason why it loops through click 1 - click 2 on certain .imagenes but not on some other .imagenes? Did you see that?
You really got me with the image opacity thing you mention, you are crazy right. Just .imagenes opacity and Z-index with .logo. Visibility is not needed at all.
Trying your suggestions.
Lets see if I finish this today
The opacity you set does get reversed. But the classes do not. Once you clicked one element twice, it has both classes: ‘novisib’ and ‘visib’ altogether because you never call .classList.remove(). That’s where the toggle method comes in handy.
You count all clicks and apply the same counter for all images, that makes it buggy, I guess. Anyway, it is not a good practice. But I haven’t checked what the classes do. Since they’re set arbitrary and all at once for some images, they will cause unwanted effects, I guess.
But are you aware that mobile browsers interpret the :hover pseudo class when the element is tapped?
anchors nesting thing amended.
You are also right about the source which is noted down in a loOong list of things to amend.
Do you think Z-index is the palce to look so anchors are hoverable - ready to use?
so finally, I have chosen the option of :hovering through .imagenes.
The mobile version of it does interpret the :hover pseudo class in way that works for me. You can give it a go to see the result on mobile. I had no idea about it.
mirja_t you are s star!
This portfolio is just another exercise that I am also using on my current job. Its been tested on several search engines and it will be online once the latest campaign I worked on is released. Its also an opportunity to keep practicing this Front-End-Developer path. I will reinterpret it to make the one I will use as Junior Front-E-D. That one will be a different animal.
Do you have any thoughts about it? Please add them to conversation.
Thank you for reading!