@hitmorecode
Posted
Nice well done. The overlay is not working see below how you can fix this
.main {
background-color: var(--very-dark-blue-card-bg);
width: 19.44rem;
border-radius: 0.83rem;
padding: 1.33rem;
position: relative; /* add this so that the overlay works */
}
/* .bgn-image-container { /* you can remove this, you don't need this */
background-color: var(--cyan);
position: relative;
} */
.bgn-image-container, .bgn-image, .overlay {
border-radius: 0.55rem;
}
.bgn-image {
/* display: block; */ /* this is what was causing the problem with the overlay */
width: 100%;
border-radius: 0.44rem;
}
.overlay {
position: absolute;
background-color: hsla(178, 100%, 50%, 50%);
/* these lines below is for the overlay to work */
top: 1.33rem; /* */
left: 1.33rem; /**/
width: 302.05px; /**/
height: 302.05px; /**/
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
}
Marked as helpful
@For1207
Posted
Thank you very much for your reply. You are right; the background color in .bgn-image-container is not necessary; it is a leftover that I overlooked from another approach. Could you please specify when the overlay doesn't work? I've checked the code and the GitHub link and opened it in the browser. Everything looks working; the overlay appears and disappears. I don't see how I can attach the screenshot to demonstrate. But again, thanks a lot for the comment @hitmorecode
@hitmorecode
Posted
@For1207 You are right I just opened in brave browser and it works, but if I open in firefox it doesn't work.
@For1207
Posted
It’s interesting. Let try. Firefox on PC or Mac? @hitmorecode
@For1207
Posted
Yes, you're right. Firefox 117.0.1, Safari 16.6, MacOS Ventura 13.5.2 - no overlay. Actually, if you point to the image's top left corner, the eye icon appears. @hitmorecode
@hitmorecode
Posted
@For1207 tried on windows and Linux Ubuntu only on chrome and brave is working. The fix that I gave you before it works on Firefox
Marked as helpful
@For1207
Posted
Thank you! I've fixed it. Now it works. At least in Firefox, Chrome, and Safari in MacOS @hitmorecode
