button feature
Review Request #32 — Created April 19, 2024 and updated
I have finished some parts of the code however , it is not complete as the image does not show up at the center of the screen when unhidden , please review and help me improve
1.Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="test.css">
<title>Document</title>
</head>
<body>
<div class="container">
<button id="button">:3</button>
<div class="expand">
<img id="cat" src="https://occ-0-64-58.1.nflxso.net/dnm/api/v6/E8vDc_W8CLv7-yMQu8KMEC7Rrr8/AAAABaJuUHU2hEBciWvuhBbw4bvAKADqOXcmEbZz3VZcgOSy2PTyIOd_ZsKu5WI5Ssd-SQwUuKKK8UABLN75D-5mWYvM8Tr6aK3KMfLZ.webp?r=5ec">
</div>
<script src="test.js"></script>
</body>
</html>
2. css
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin-left: 800px;
}button {
position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer;}
cat {
transition: transform 500ms, opacity 500ms; transform: scale(0); opacity: 0;}
body {
overflow: hidden;
}cat.active {
display: flex; transform: scale(1); opacity: 1; justify-content: center; align-items: center;}
3. javascript
let button = document.getElementById("button");
//let catContainer = document.querySelector(".catContainer");
let cat = document.getElementById("cat");function toggleExpand() {
cat.classList.toggle("active");
}button.onclick = toggleExpand;
cat.onclick = toggleExpand;
| Description | From | Last Updated |
|---|---|---|
|
Your transition is right but it's should be appear in center. |
 Brathna
|