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:


<!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):

body { 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):

const 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.

Have questions or queries?
Get in Touch