Submitted about 1 year ago

QR Code component challenge - Solution using Flexbox

Leo-Code-CA• 60

@Leo-Code-CA

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi there!

Thanks for having a look to my solution :)

As I explained on the continuous development section of the README.md file of my repository, I wish I knew how to make my bottom page attribution paragraph stay visible even after unhover. I mean, it's hidden at the beginning and it becomes visible when the user hovers over it, that's good. However when the user unhovers, it disappears, that's the problem. I'd like it to stay visible no matter what the user is doing after the first hover.

I haven't managed to find a CSS only solution. I've read that it can be done "easily" with JavaScript but I have only a very basic understanding of it as I've only started to learn about it a few days ago on FreeCodeCamp. If someone knows how to do and could explain me step by step, it would be much appreciated!

Happy coding!

Community feedback

Hamza Masmoudi• 180

@HamzaMasmoudi

Posted about 1 year ago

Hello @Leo-Code-CA nice work and great job on recreating the design it looks identical to the original design.

About the attribution paragraph you can just remove the opacity: 0; from the .attribution class and that will solve your problem. Happy coding, Best regards Hamza Masmoudi

Leo-Code-CA• 60

@Leo-Code-CA

Posted about 1 year ago

Good morning @HamzaMasmoud and thanks a lot for your feedback!

Unfortunately, I think my problem is more complex. I don't want the attribution paragraph to be visible when the user loads the page, that's why I used opacity: 0; so I can't remove it. I'd like this paragraph to stay hidden until the user hovers over the figure for the first time but instead of disappearing again when the user doesn't hover the figure anymore, I'd like it to stay visible. Do you know what I mean?

I just want the paragraph to be hidden until the user hovers over the figure and from this moment, the paragraph must stay visible no matter what the user does. Do you have an idea?

Thank you again!

Account Deleted

I think it's good to change height to min-height in figure in case you added more text in the future or when someone zooms in the browser the text won't overflow.

figure {
  width: 320px;
  min-height: 500px;
  ...
}

Leo-Code-CA• 60

@Leo-Code-CA

Posted about 1 year ago

@alwan-atayf thanks for the input!

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord