CSS - Darken image except for rectangle overlay

0 votes
I'm attempting to come up with a solution to get the following effect with only CSS and no JS. I was planning on using an inset border box, but I need to be able to utilize percentages for both the position (e.g., the top left of the highlighted region is 50 percent in from the left and 80 percent down from the right) and the size of the box, yet border-box only accepts px values. If the image size changes, I could use JS to maintain scaling everything, but I don't want to. Any solution?
May 27, 2022 in CSS by Edureka
• 13,620 points
672 views

1 answer to this question.

0 votes
Perhaps try constructing four boxes, one on each side of the image, overlapping as much as needed. Set the boxes' colours to black with a transparency and alter their sizes as desired. These boxes would be superimposed on top of the original image.
answered May 28, 2022 by Edureka
• 12,690 points

Related Questions In CSS

0 votes
0 answers

How to make in CSS an overlay over an image?

I want to add this dark hue, ...READ MORE

Jul 22, 2022 in CSS by Edureka
• 13,620 points
405 views
0 votes
0 answers

Darken CSS background image?

It ought to be a rather easy ...READ MORE

Aug 17, 2022 in CSS by Edureka
• 13,620 points
621 views
0 votes
1 answer

How do I give text or an image a transparent background using CSS?

Use either a semi-transparent PNG or SVG ...READ MORE

answered May 27, 2022 in CSS by Edureka
• 12,690 points
580 views
0 votes
1 answer

Displaying Loading Image using CSS

You can set the spinner as a ...READ MORE

answered May 28, 2022 in CSS by Edureka
• 12,690 points
511 views
0 votes
1 answer

Render HTML to an image

To answer your question, there are a ...READ MORE

answered Feb 8, 2022 in Java by Soham
• 9,710 points
1,820 views
0 votes
1 answer

seo - images and h1

SEO is speculative at best. Generally, the accepted ...READ MORE

answered Mar 11, 2022 in Digital Marketing by narikkadan
• 63,720 points
748 views
0 votes
0 answers

When to use IMG vs. CSS background-image?

In what situations is it more appropriate ...READ MORE

Mar 10, 2022 in Digital Marketing by Kichu
• 19,050 points
600 views
0 votes
0 answers

How to hide image broken Icon using only CSS/HTML?

I need to hide this error image/ ...READ MORE

May 27, 2022 in HTML by Tejashwini
• 3,820 points
556 views
0 votes
1 answer

How to overlay image with color in CSS?

Use the rgba() Function to Overlay Background ...READ MORE

answered Jun 28, 2022 in CSS by Edureka
• 12,690 points
882 views
0 votes
1 answer

Is there any way to colorize a white PNG image with CSS only?

Filters can be used with -webkit-filter and ...READ MORE

answered May 27, 2022 in CSS by Edureka
• 12,690 points
1,885 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP