To create a preview-to-full-page effect for a div element in HTML and CSS, you can use a combination of CSS transitions and JavaScript event handling. This effect allows the div to expand to full-page size when clicked, and contract back to its original size when clicked again.
Here's a step-by-step guide on how to achieve this effect:
HTML:
html<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="preview-box" id="previewBox">
<!-- Content of the preview box goes here -->
</div>
<script src="script.js"></script>
</body>
</html>
CSS (styles.css):
cssbody {
margin: 0;
padding: 0;
}
.preview-box {
width: 200px; /* Initial width of the preview box */
height: 200px; /* Initial height of the preview box */
background-color: #f0f0f0;
cursor: pointer;
transition: width 0.5s, height 0.5s;
}
.full-screen {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
JavaScript (script.js):
jsconst previewBox = document.getElementById('previewBox');
// Add a click event listener to the preview box
previewBox.addEventListener('click', () => {
// Toggle the "full-screen" class to expand or contract the preview box
previewBox.classList.toggle('full-screen');
});
In this example, we have a div element with the class preview-box, which represents the preview box. By default, it has a specific width and height set in the CSS. When the user clicks on the div, the JavaScript click event listener is triggered, toggling the full-screen class on the div.
The full-screen class is defined in the CSS with position fixed, and top, left, width, and height set to cover the entire viewport. When the full-screen class is applied to the div, it will expand to fill the entire page, creating the full-page effect. Clicking on it again will remove the full-screen class, causing the div to contract back to its original size.
With this setup, the div will act as a preview that expands to full-page size when clicked and contracts back to its original size when clicked again. You can customize the width, height, and other styles to achieve the desired visual effect.