Can you use Pin Light in CSS?

Question

I know we can use mix-blend-mode in CSS, but the Pin Light blending mode that is in Photoshop doesn't seem to be an option on web browsers. Is there a work around to get the same effect?

Thank you.

Answer 1

try this i have added two examples one with the overlay and one without the overlay for you to see the difference

.container {
  position: relative;
  width: 100%;
  margin-bottom:10px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  transition: .5s ease;
  background-color:rgba(0, 140, 186,0.3);
}

<div class="container">
  <img src="//upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Wikimedia_Hackathon_Prague_2019_-_Group_Photo_-_CLK_-_cropped.jpg/320px-Wikimedia_Hackathon_Prague_2019_-_Group_Photo_-_CLK_-_cropped.jpg" alt="Avatar" class="image">
  <div class="overlay">
    
  </div>
</div>

<div class="container">
  <img src="//upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Wikimedia_Hackathon_Prague_2019_-_Group_Photo_-_CLK_-_cropped.jpg/320px-Wikimedia_Hackathon_Prague_2019_-_Group_Photo_-_CLK_-_cropped.jpg" alt="Avatar" class="image">
 
</div>