I didn't know how to put images on there so that we need to assume that instead of photo, I create a styled div. Let's assume that the Photo1 (background: blue) is the Original Photo while Photo2 (background: red|) is the Edited Photo. I want my project that if the user clicks the "Start" button, the original photo will gradually replace by Edited Photo pixel by pixel. Similar to the code I made. But the difference is that when the photo is placed, the photo also resizes from width: 100% to width: 0px. I want to crop the original photo pixel by pixel while the edited photo gradually revealed pixel by pixel also without resizing the photo. If you didn't understand what I need, my project is like the site https://remove.bg .. If you upload on that site, I love the feature converting the images from with BG to without BG then the animations are. .... replacing the photo with BG to photo without BG pixel by pixel. I research related in object-fit but I didn't expert on that kind of CSS. Hope you help me.
Here's my code
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<button>Start</button>
<div class="Handler">
<div class="Photo1"></div>
<div class="Photo2"></div>
</div>
</body>
</html>
CSS:
margin: 0;
padding: 0;
box-sizing: border-box;
}
.Handler{
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: 400px;
display: flex;
justify-content: center;
transform: translate(-50%, -50%);
}
.Photo1{
width: 100%;
height: 100%;
background: blue;
transition: 1.5s;
}
.Photo2{
width: 0;
height: 100%;
background: red;
transition: 1.5s;
}
button{
width: 60%;
border: none;
background: blue;
color: white;
padding: 10px;
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 18px;
font-weight: bold;
}
JS:
let a = document.querySelector("button"),
b = document.querySelector(".Photo1"),
c = document.querySelector(".Photo2");
a.addEventListener("click", function(){
b.style.width = "0px";
c.style.width = "100%";
setTimeout(function(){
c.style.width = "0px";
b.style.width = "100%";
}, 3000);
});
PS: I used my mobile device as of now to write this question, I hope others make a Code Snippet on my code. And if you Desktop User, please resize your screen to smaller width like 600px.