Alignment of Image

Question

I have the following code:

 // Projects Script document.addEventListener("DOMContentLoaded", function (event) { // Select all the read more buttons and hidden contents const readMoreButtons = document.querySelectorAll(".read-more"); const hiddenContents = document.querySelectorAll(".hidden"); // Now loop over the read more buttons readMoreButtons.forEach((readMoreButton, index) => { // Add onclick event listeners to all of them readMoreButton.addEventListener("click", () => { // Change content of read more button to read less based on the textContent if (readMoreButton.textContent === "Read More") { readMoreButton.textContent = "Read Less"; } else { readMoreButton.textContent = "Read More"; } // Toggle class based on index hiddenContents[index].classList.toggle("hidden"); }) }) })

 @import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800); .project-container { display: flex; flex-wrap: wrap; justify-content: center; color: white; } figure.snip1311 { font-family: 'Raleway', Arial, sans-serif; position: relative; float: left; overflow-y: auto; overflow-x: hidden; margin: 10px 1%; min-width: 230px; max-width: 360px; max-height: 256px; width: 500rem; color: #ffffff; text-align: left; background-color: #07090c; font-size: 16px; -webkit-perspective: 50em; perspective: 50em; border: 3px solid #555; } figure.snip1311 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } figure.snip1311 img { max-width: 110%; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; backface-visibility: hidden; height: 258px; } figure.snip1311 figcaption { position: absolute; top: 50%; left: 0; width: 100%; -webkit-transform: rotateX(90deg) translate(0%, -50%); transform: rotateX(90deg) translate(0%, -50%); -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; transform-origin: 0% 0%; z-index: 1; opacity: 0; padding: 0 30px; } figure.snip1311 h3, figure.snip1311 p { line-height: 1.5em; } figure.snip1311 h3 { margin: 0; font-weight: 800; text-transform: uppercase; } figure.snip1311 p { font-size: 0.8em; font-weight: 500; margin: 0 0 15px; } figure.snip1311 .read-more { border: 2px solid #ffffff; padding: 0.5em 1em; font-size: 0.8em; text-decoration: none; color: #ffffff; display: inline-block; } figure.snip1311 .read-more:hover { background-color: #ffffff; color: #000000; } figure.snip1311 .read-more1 { border: 2px solid #ffffff; padding: 0.5em 1em; font-size: 0.8em; text-decoration: none; color: #ffffff; display: inline-block; } figure.snip1311 .read-more1:hover { background-color: #ffffff; color: #000000; } figure.snip1311:hover img, figure.snip1311.hover img { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); opacity: 0; -webkit-transition-delay: 0; transition-delay: 0; } figure.snip1311:hover figcaption, figure.snip1311.hover figcaption { -webkit-transform: rotateX(0deg) translate(0, -50%); transform: rotateX(0deg) translate(0, -50%); opacity: 1; -webkit-transition-delay: 0.35s; transition-delay: 0.35s; } .hidden{ display:none; } .read-more{ cursor:pointer; } /* ScrollBar */ ::-webkit-scrollbar { width: 5px; height: auto; } /* Track */ ::-webkit-scrollbar-track { box-shadow: inset 0 0 3px transparent; } /* Handle */ ::-webkit-scrollbar-thumb { background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwcNCA0NCA0HBwgIBw0HBwcHBw8ICQcNFREWFhUREx8YHSggGBoxJxMVITEhJSkrLi46Fx8zODMsNygtLisBCgoKDQ0NDw0NDisZFRkrKy0rKysrLTcrKystLTctLSsrKysrKysrKysrLS0rKysrNy0rLSstLSsrKysrKysrK//AABEIALwBDAMBIgACEQEDEQH/xAAaAAEBAQEBAQEAAAAAAAAAAAACAQMABwYF/8QAFhABAQEAAAAAAAAAAAAAAAAAAQAR/8QAGQEBAQEBAQEAAAAAAAAAAAAAAgABAwYF/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAER/9oADAMBAAIRAxEAPwD8HLsll2X23xNDLsllMpujlMnlMpuhlMnlEpuhlEnlEpugkUtMolFKzyiTSiWlrNKJNKZRSs0ilokUopQaJJKNFKCRSaUS0pWaRS0SKUUCLNi0cBik0i2lKCRSaRaOAxSbFooDGbTKOPs8pk8uy5vO6GUyeUym6GUy0ymU3WeXZPI5a3QyiTymUWhkW0SKU2UEok0ilFKDRJpG0pQSLaJFopWbFLRIpRygxSaRbSlBilokWilZsW0SLRygxZsUooDFmxbTjNozYtHAYzY0Ur7XLsnlMubzmhl2TymU3QymTymU3QymTymU3WaUSeUSi0IpNKWlKCRy0SKUUBIpNKJRSs0ok0i2lKCRZpFKKUEik0i0coRZtGijNi2iRS05WbGbFo4DFJsW0oCRZsWjgMUmxo4+/9k=); border-radius: 10px; }

 <div class="project-container"> <figure class="snip1311"><img src="https://static.wixstatic.com/media/d6f6df_dd155c086895409ab4f61f494fa3108b~mv2.png/v1/fill/w_440,h_320,al_c,q_85,usm_0.66_1.00_0.01/footprint.webp" alt="sample94"/> <figcaption> <h3>Sample Text</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum mi et eros finibus, eget efficitur dolor accumsan. Proin ut varius ligula. Duis et nulla eu metus congue auctor at vitae arcu.</p> <div class="read-more">Read More</div> <p class="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum mi et eros finibus, eget efficitur dolor accumsan. Proin ut varius ligula. Duis et nulla eu metus congue auctor at vitae arcu. Quisque vehicula porttitor ultrices. Curabitur urna velit, auctor eget dignissim nec, commodo congue metus. Pellentesque leo ante, ullamcorper sit amet ornare eleifend, fringilla a ligula. Phasellus congue magna vitae purus pretium dapibus. Etiam in erat magna.</p> </figcaption> </figure>

When you run the above code, see how the scrollbar is there on the box? I would like that to be hidden, but only appear after the user clicks the read more button . So, the expected output should be the scrollbar hidden on the box, but I would like the y-axis scrollbar to only appear after the user clicks read more button.

The way to accomplish that would be to remove the unnecessary space on the box. For example, I set the height of the image to 258 px because the whole box height is that, and so I wanted to remove the extra space so that the scrollbar does not appear. It should only appear after the user clicks read more button. Any suggestions?

Answer 1

Just make overflow-y hidden by default, and auto when toggled.

Get the scrolled-container of the button by closest * method, then toggle its class the same way you toggled the hiddenContents .

* closest nethod has 95.3% support rate as of today, so you may need an alternative , depends on your clients nature.

 // Projects Script document.addEventListener("DOMContentLoaded", function(event) { // Select all the read more buttons and hidden contents const readMoreButtons = document.querySelectorAll(".read-more"); const hiddenContents = document.querySelectorAll(".hidden"); // Now loop over the read more buttons readMoreButtons.forEach((readMoreButton, index) => { // Add onclick event listeners to all of them readMoreButton.addEventListener("click", () => { // Change content of read more button to read less based on the textContent if (readMoreButton.textContent === "Read More") { readMoreButton.textContent = "Read Less"; } else { readMoreButton.textContent = "Read More"; } // Toggle class based on index hiddenContents[index].classList.toggle("hidden"); readMoreButton.closest(".snip1311").classList.toggle("reading"); }) }) })

 @import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800); .project-container { display: flex; flex-wrap: wrap; justify-content: center; color: white; } figure.snip1311.reading { overflow-y: auto; } figure.snip1311 { font-family: 'Raleway', Arial, sans-serif; position: relative; float: left; overflow-x: hidden; overflow-y: hidden; margin: 10px 1%; min-width: 230px; max-width: 360px; max-height: 256px; width: 500rem; color: #ffffff; text-align: left; background-color: #07090c; font-size: 16px; -webkit-perspective: 50em; perspective: 50em; border: 3px solid #555; } figure.snip1311 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } figure.snip1311 img { max-width: 110%; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; backface-visibility: hidden; height: 258px; } figure.snip1311 figcaption { position: absolute; top: 50%; left: 0; width: 100%; -webkit-transform: rotateX(90deg) translate(0%, -50%); transform: rotateX(90deg) translate(0%, -50%); -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; transform-origin: 0% 0%; z-index: 1; opacity: 0; padding: 0 30px; } figure.snip1311 h3, figure.snip1311 p { line-height: 1.5em; } figure.snip1311 h3 { margin: 0; font-weight: 800; text-transform: uppercase; } figure.snip1311 p { font-size: 0.8em; font-weight: 500; margin: 0 0 15px; } figure.snip1311 .read-more { border: 2px solid #ffffff; padding: 0.5em 1em; font-size: 0.8em; text-decoration: none; color: #ffffff; display: inline-block; } figure.snip1311 .read-more:hover { background-color: #ffffff; color: #000000; } figure.snip1311 .read-more1 { border: 2px solid #ffffff; padding: 0.5em 1em; font-size: 0.8em; text-decoration: none; color: #ffffff; display: inline-block; } figure.snip1311 .read-more1:hover { background-color: #ffffff; color: #000000; } figure.snip1311:hover img, figure.snip1311.hover img { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); opacity: 0; -webkit-transition-delay: 0; transition-delay: 0; } figure.snip1311:hover figcaption, figure.snip1311.hover figcaption { -webkit-transform: rotateX(0deg) translate(0, -50%); transform: rotateX(0deg) translate(0, -50%); opacity: 1; -webkit-transition-delay: 0.35s; transition-delay: 0.35s; } .hidden { display: none; } .read-more { cursor: pointer; } /* ScrollBar */ ::-webkit-scrollbar { width: 5px; height: auto; } /* Track */ ::-webkit-scrollbar-track { box-shadow: inset 0 0 3px transparent; } /* Handle */ ::-webkit-scrollbar-thumb { background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwcNCA0NCA0HBwgIBw0HBwcHBw8ICQcNFREWFhUREx8YHSggGBoxJxMVITEhJSkrLi46Fx8zODMsNygtLisBCgoKDQ0NDw0NDisZFRkrKy0rKysrLTcrKystLTctLSsrKysrKysrKysrLS0rKysrNy0rLSstLSsrKysrKysrK//AABEIALwBDAMBIgACEQEDEQH/xAAaAAEBAQEBAQEAAAAAAAAAAAACAQMABwYF/8QAFhABAQEAAAAAAAAAAAAAAAAAAQAR/8QAGQEBAQEBAQEAAAAAAAAAAAAAAgABAwYF/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAER/9oADAMBAAIRAxEAPwD8HLsll2X23xNDLsllMpujlMnlMpuhlMnlEpuhlEnlEpugkUtMolFKzyiTSiWlrNKJNKZRSs0ilokUopQaJJKNFKCRSaUS0pWaRS0SKUUCLNi0cBik0i2lKCRSaRaOAxSbFooDGbTKOPs8pk8uy5vO6GUyeUym6GUy0ymU3WeXZPI5a3QyiTymUWhkW0SKU2UEok0ilFKDRJpG0pQSLaJFopWbFLRIpRygxSaRbSlBilokWilZsW0SLRygxZsUooDFmxbTjNozYtHAYzY0Ur7XLsnlMubzmhl2TymU3QymTymU3QymTymU3WaUSeUSi0IpNKWlKCRy0SKUUBIpNKJRSs0ok0i2lKCRZpFKKUEik0i0coRZtGijNi2iRS05WbGbFo4DFJsW0oCRZsWjgMUmxo4+/9k=); border-radius: 10px; }

 <div class="project-container"> <figure class="snip1311"><img src="https://static.wixstatic.com/media/d6f6df_dd155c086895409ab4f61f494fa3108b~mv2.png/v1/fill/w_440,h_320,al_c,q_85,usm_0.66_1.00_0.01/footprint.webp" alt="sample94" /> <figcaption> <h3>Sample Text</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum mi et eros finibus, eget efficitur dolor accumsan. Proin ut varius ligula. Duis et nulla eu metus congue auctor at vitae arcu.</p> <div class="read-more">Read More</div> <p class="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum mi et eros finibus, eget efficitur dolor accumsan. Proin ut varius ligula. Duis et nulla eu metus congue auctor at vitae arcu. Quisque vehicula porttitor ultrices. Curabitur urna velit, auctor eget dignissim nec, commodo congue metus. Pellentesque leo ante, ullamcorper sit amet ornare eleifend, fringilla a ligula. Phasellus congue magna vitae purus pretium dapibus. Etiam in erat magna.</p> </figcaption> </figure>