A horizontal line appear on left side of a popup image as I am using a box-shadow, trouble occured when a flex is enabled

Question

0.00/5 (No votes)

See more:

When a thumb image is clicked, a horizontal line appear on left side of a popup image. it happens because i added a box-shadow to img css. i am practicing using a flex, problem not occured when flex is disabled. how to fix it..

This is my codepen for a code: [^]

What I have tried:

I've tried disabling a flex, it's going fine. but this is not what i want.
i want a horizontal line don't appear as a flex is enabled.
need help..

Posted 20-Aug-20 18:13pm

Dec Fathani

Updated 5-Sep-20 1:36am

Add a Solution

Comments

Sandeep Mewara 21-Aug-20 0:20am

Did you checkout: https://scrimba.com/g/gflexbox

Sandeep Mewara 21-Aug-20 0:50am

BTW, when I checked codepen, I don't see any horizontal line in FF. Though an extra 'x' on left side (total two 'x', one on left side and another next to image)

Looked like a bug with flex.

Dec Fathani 21-Aug-20 1:53am

this is how it look like on my computer [^]

i've checked your link suggestion, this will help me learning flex. thanks

Sandeep Mewara 21-Aug-20 2:12am

That line is not there when I view in codepen. I have extra x instead.

My suspect is a bug in flex. I will still wait for anyone else to comment on it.

Sandeep Mewara 21-Aug-20 2:12am

Good to know this will help :)

:thumbsup:

Sandeep Mewara 21-Aug-20 2:15am

BTW, check the last image in codepen you shared. I don't see extra cross with it. Assuming its line for you and cross for me. Do you too see this horizntal line with last image click too?

Dec Fathani 21-Aug-20 3:23am

I know bout this, there's no a horizontal line on last image click. I don't know what's wrong with my code, hope anyone can help,

Thanks for your time to check my codepen

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Dec Fathani · Accepted Answer · 2020-09-05T01:36:00

Solution 1

i know why my page doesn't show correctly. something wrong with my code and figure it out. i change a selector '.overlay img' to '.overlay:target img'. my page looks as the way i want

Posted 5-Sep-20 1:36am

Dec Fathani