CODEWITHSUNDEEP
javascriptcss
riyad303030
riyad303030

Reputation: 39

How to do reverse functionality of z-index

I have a div and one h1 element and one svg element. I move svg element according to mouse position. h1 element z-index is lower and svg element z-index is higher. when svg element hover over the h1 element its going to disappear according to how much portion i overlapped. but i need to know how to do reverse like at first the h1 is disappeared when i move the svg element over the h1 element then the h1 element shows according to how much portion the svg element overlapped. I attach a picture and my code. please help me out if anyone knows how to do that.enter image description here

enter image description here

<!DOCTYPE html>
<html lang="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="css/main.css">
</head>

<body>
<div id="wrap">

</div>
<h1 id="back_head">back</h1>

<svg id="sv">
    <circle id="cir" cx="" cy="" r="70" fill="red" />
</svg>

<script src="js/main.js"></script>
</body>

</html>

My css:

* {
margin: 0;
padding: 0;
}

#wrap {
background: orange;
position: absolute;
top: 0;
left: 0;
height: 250px;
width: 500px;
z-index: 50;
}

#back_head {
position: absolute;
top: 0;
left: 0;
z-index: 55;
}


#sv {
height: 250px;
width: 500px;
position: absolute;
z-index: 70;
}

my javascript code:

var cir = document.getElementById("cir");
var wrap = document.getElementById("sv");
wrap.addEventListener("mousemove", function (e) {
var x = e.clientX;
var y = e.clientY;
cir.setAttribute("cx", x);
cir.setAttribute("cy", y);
});

Upvotes: 0

Views: 368

Answers (1)

Temani Afif
Temani Afif

Reputation: 273481

You can do this with some box-shadow trick where the idea is to consider a transparent circle having a big box-shadow that you place above your text. You also don't need SVG.

Here is simplified example:

var wrap = document.getElementById("wrap");
wrap.addEventListener("mousemove", function(e) {
  var x = e.clientX;
  var y = e.clientY;
  wrap.style.setProperty("--x", x+"px");
  wrap.style.setProperty("--y", y+"px");
});
#wrap {
  background: red;
  height: 250px;
  width: 500px;
  z-index: 0;
  position:relative;
  overflow:hidden;
}
#wrap:before {
  content:"";
  position:absolute;
  top:var(--y);
  left:var(--x);
  transform:translate(-50%,-50%);
  width:140px;
  height:140px;
  border-radius:50%;
  box-shadow:0 0 0 200vw orange;
}
<div id="wrap">
  <h1 id="back_head">back</h1>
</div>

Upvotes: 3

Related Questions