Overlay

by cyclone108

HTML

<div class="image-section">
  <div class="image" >
    <div class="overlay-section">
       <div class="overlay"></div>
       <div class="overlay-two"></div>
    </div>
  </div>
</div>

CSS

.image-section {
  position:relative;
}
.image {
  background-image: url(https://previews.123rf.com/images/boris15/boris151410/boris15141000146/33004655-ebola-virus-word-cloud-concept-vector-illustration.jpg);
  background-size: cover;
 }
 
 .overlay-section {
  mix-blend-mode: multiply;
}

.overlay {
  position: absolute;
}

.overlay-two {
  position: absolute;
}

JavaScript

function convertToPercentage(num){
	return (num * 100).toString() + "%"
}

function applyOverlay(name, values, minY, ratio){
	const scaledY = (values.y - minY) * ratio + minY;
  const scaledHeight = values.height * ratio;


	const overlay = document.querySelector(name);
  overlay.style.left = convertToPercentage(values.x);
  overlay.style.top = convertToPercentage(scaledY);
  overlay.style.height = convertToPercentage(scaledHeight);
  overlay.style.width = convertToPercentage(values.width);
  overlay.style.backgroundColor = values.color;
}

const overlay = {
  x: 0.43,
  y: 0.645,
  width: 0.26,
  height: 0.03,
  color: "green",
}
const overlayTwo = {
  x: 0.26,
  y: 0.68,
  width: 0.35,
  height: 0.03,
  color: "blue"
}

const viewportSize = 700 / 500
const ratio = 10110 / 4629 * viewportSize;
const minY = Math.min(...[overlay.y, overlayTwo.y])
const image = document.querySelector(".image");
image.style.backgroundPositionY = convertToPercentage(minY);
image.style.aspectRatio = viewportSize;

applyOverlay(".overlay", overlay, minY, ratio)
applyOverlay(".overlay-two", overlayTwo, minY, ratio)