I created a structure consisting of 2 png photos. one of them random lines and its z-index is 6 and the other is a bear photo and z-index is 5
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="test.css">
<title>Page Redirection</title>
</head>
<body>
<div class="kutu">
<div class="cizgi">
</div>
<div class="resim1">
</div>
</div>
</body>
</html>
.kutu {
position: relative;
width: 500px;
height: 500px;
background-color: aqua;
display: block;
margin: auto;
background-image: url(background.jpg);
}
.resim1 {
position: absolute;
height: 100%;
width: 200px;
max-width: 100%;
background-image: url(bear.png);
background-repeat: no-repeat;
background-size: 200px 200px;
z-index: 5;
left: 60%;
top: 50%;
filter: brightness(0) invert(1);
}
.cizgi {
position: absolute;
height: 100%;
max-width: 100%;
width: 100%;
background-repeat: no-repeat;
background-image: url(fe45bef1-0c56-46ea-a58e-998a46454321.png);
background-size: 500px 500px;
z-index: 6;
}
.The bear photo will always randomly occur anywhere in the box.The bear photo normally looks like this, but when the lines are on it, it's looks like this.What I want is to create another div below and somehow reflect the new version of the bear photo i.e. the striped version. If this is exactly what I want, this is it.
