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 in CSS by Edureka
• 7,660 points
21 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 by Edureka
• 8,460 points

Related Questions In CSS

0 votes
1 answer

Displaying Loading Image using CSS

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

answered May 28 in CSS by Edureka
• 8,460 points
15 views
0 votes
1 answer

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

Because CSS/HTML has no means of knowing ...READ MORE

answered May 31 in CSS by Edureka
• 8,460 points
13 views
0 votes
1 answer

Change color of PNG image via CSS?

The simplest one line that worked for ...READ MORE

answered Jun 1 in CSS by Edureka
• 8,460 points
32 views
0 votes
1 answer

html/css hexagon with image inside

The CSS3 clip-path feature is a novel ...READ MORE

answered Jun 10 in CSS by Edureka
• 8,460 points
27 views
0 votes
1 answer

Render HTML to an image

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

answered Feb 8 in Java by Soham
• 8,730 points
287 views
0 votes
0 answers

seo - images and h1

I like to have logos instead of ...READ MORE

Mar 9 in Digital Marketing by Kichu
• 19,040 points
28 views
0 votes
0 answers

When to use IMG vs. CSS background-image?

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

Mar 10 in Digital Marketing by Kichu
• 19,040 points
25 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 in HTML by Tejashwini
• 400 points
24 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 in CSS by Edureka
• 8,460 points
22 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 in CSS by Edureka
• 8,460 points
23 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP