How to remove or hide opacity from the image in html? [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

Want to improve this question? Guide the asker to update the question so it focuses on a single, specific problem. Narrowing the question will help others answer the question concisely. You may edit the question if you feel you can improve it yourself. If edited, the question will be reviewed and might be reopened.

Closed 8 years ago.

Improve this question

I have an image which is showed as a background image. I want to set default opacity to 0.5. And wanted some part to be shown without opacity in image. Will it possible purely in css, html, javascript/jQuery?

Below is the sample image.

Possible duplicate of CSS or JavaScript to highlight certain area of image opacity — Klinger
– Klinger, Commented Dec 21, 2016 at 6:08
@azhar I'm added ananswer if it's helpful don't forget to tick it — ADH - THE TECHIE GUY
– ADH - THE TECHIE GUY, Commented Dec 21, 2016 at 6:20

aavrug · Accepted Answer · 2016-12-21 07:52:11Z

3

Here is the trick.

Create an overlay with :before or :after pseudo element.
Apply css3 transformation.
Use large box-shadow and add overflow: hidden on parent to hide undesired part.

.image-holder {
  display: inline-block;
  position: relative;
  vertical-align: top;
  overflow: hidden;
}

.image-holder:before {
  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
  transform: skew(-25deg);
  -webkit-transform: skew(-25deg);
  -webkit-backface-visibility: hidden;
  position: absolute;
  width: 100px;
  bottom: 20px;
  content: '';
  right: 100px;
  top: 20px;
}

.image-holder img {
  vertical-align: top;
}

<div class="image-holder">
  <img src="http://placehold.it/450x200">
</div>

edited Dec 21, 2016 at 7:52

aavrug

1,9041 gold badge12 silver badges20 bronze badges

answered Dec 21, 2016 at 6:23

Mohammad Usman

39.6k20 gold badges99 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ADH - THE TECHIE GUY · Accepted Answer · 2016-12-21 06:18:07Z

0

you can do this by position an <div> over the image using position:absolute.I'm added an snippet below.

img{
  width:300px;
  height:300px;
  }
#highlight{
  position:absolute;
  width:100px;
  height:100px;
  background:#fff;
  opacity:0.5;
  top:50px;
  left:50px;
  
  }

<img src="https://i.sstatic.net/UaQWH.jpg">
<div id="highlight"></div>

answered Dec 21, 2016 at 6:18

ADH - THE TECHIE GUY

4,4134 gold badges34 silver badges54 bronze badges

Collectives™ on Stack Overflow

How to remove or hide opacity from the image in html? [closed]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related