benjaminternational

@tuanphan I assigned each image with the appropriate #link and filled in the corresponding code into the footer, changing the # and block ID's for each of the 20. It didn't work. I am wondering if maybe it's because in the tutorial I followed, all three texts that were clicked to reveal more text were in the same block? And each of my images using to trigger the text are separate blocks? Here's the code I have in the footer: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("#block-0b7a02dd2c85f175322c").addClass("show"); // One $('.html-block a[href="#one"]').click(function(){ $("#block-0b7a02dd2c85f175322c").addClass("show"); $('div:not(#block-0b7a02dd2c85f175322c)').removeClass('show'); } ); // Two $('.html-block a[href="#two"]').click(function(){ $("#block-6f4b5e061432958cb0b6").addClass("show"); $('div:not(#block-6f4b5e061432958cb0b6)').removeClass('show'); } ); // Three $('.html-block a[href="#three"]').click(function(){ $("#block-d3b4bbf7faca9ffce4f7").addClass("show"); $('div:not(#block-d3b4bbf7faca9ffce4f7)').removeClass('show'); } ); // Four $('.html-block a[href="#four"]').click(function(){ $("#block-c0b09d04b6a3582346a8").addClass("show"); $('div:not(#block-c0b09d04b6a3582346a8)').removeClass('show'); } ); // Five $('.html-block a[href="#five"]').click(function(){ $("#block-5271881fc2d21e6ae00c").addClass("show"); $('div:not(#block-5271881fc2d21e6ae00c)').removeClass('show'); } ); // Six $('.html-block a[href="#six"]').click(function(){ $("#block-c7e44d4ff3efa537cb99").addClass("show"); $('div:not(#block-c7e44d4ff3efa537cb99)').removeClass('show'); } ); // Seven $('.html-block a[href="#seven"]').click(function(){ $("#block-0d7423fe1daaab31936a").addClass("show"); $('div:not(#block-0d7423fe1daaab31936a)').removeClass('show'); } ); // Eight $('.html-block a[href="#eight"]').click(function(){ $("#block-24d2c726d7d2ad97d825").addClass("show"); $('div:not(#block-24d2c726d7d2ad97d825)').removeClass('show'); } ); // Nine $('.html-block a[href="#nine"]').click(function(){ $("#block-56df435772c9325b22a0").addClass("show"); $('div:not(#block-56df435772c9325b22a0)').removeClass('show'); } ); // Ten $('.html-block a[href="#ten"]').click(function(){ $("#block-860fc5bcbead12e0f5ab").addClass("show"); $('div:not(#block-860fc5bcbead12e0f5ab)').removeClass('show'); } ); // Eleven $('.html-block a[href="#eleven"]').click(function(){ $("#block-b51e033a74c3216782f7").addClass("show"); $('div:not(#block-b51e033a74c3216782f7)').removeClass('show'); } ); // Twelve $('.html-block a[href="#twelve"]').click(function(){ $("#block-96e63a3f052729fe6f29").addClass("show"); $('div:not(#block-96e63a3f052729fe6f29)').removeClass('show'); } ); // Thirteen $('.html-block a[href="#thirteen"]').click(function(){ $("#block-fb133884d63f0b03e172").addClass("show"); $('div:not(#block-fb133884d63f0b03e172)').removeClass('show'); } ); // Fourteen $('.html-block a[href="#fourteen"]').click(function(){ $("#block-057f810f3a451851694d").addClass("show"); $('div:not(#block-057f810f3a451851694d)').removeClass('show'); } ); // Fifteen $('.html-block a[href="#fifteen"]').click(function(){ $("#block-6dcf57ee364cca147d9d").addClass("show"); $('div:not(#block-6dcf57ee364cca147d9d)').removeClass('show'); } ); // Sixteen $('.html-block a[href="#sixteen"]').click(function(){ $("#block-5d7b73f4d74d86d6dccc").addClass("show"); $('div:not(#block-5d7b73f4d74d86d6dccc)').removeClass('show'); } ); // Seventeen $('.html-block a[href="#seventeen"]').click(function(){ $("#block-0a3a6f11d4961ffdcd84").addClass("show"); $('div:not(#block-0a3a6f11d4961ffdcd84)').removeClass('show'); } ); // Eighteen $('.html-block a[href="#eighteen"]').click(function(){ $("#block-858a16f05c26e1f08aed").addClass("show"); $('div:not(#block-858a16f05c26e1f08aed)').removeClass('show'); } ); // Nineteen $('.html-block a[href="#nineteen"]').click(function(){ $("#block-74acbaff8d58b5939dbf").addClass("show"); $('div:not(#block-74acbaff8d58b5939dbf)').removeClass('show'); } ); // Twenty $('.html-block a[href="#twenty"]').click(function(){ $("#block-cd598cd8b64cfa51aeae").addClass("show"); $('div:not(#block-cd598cd8b64cfa51aeae)').removeClass('show'); } ); }); </script> <style> #block-0b7a02dd2c85f175322c, #block-6f4b5e061432958cb0b6, #block-d3b4bbf7faca9ffce4f7, #block-c0b09d04b6a3582346a8, #block-5271881fc2d21e6ae00c, #block-c7e44d4ff3efa537cb99, #block-0d7423fe1daaab31936a, #block-24d2c726d7d2ad97d825, #block-56df435772c9325b22a0, #block-860fc5bcbead12e0f5ab, #block-b51e033a74c3216782f7, #block-96e63a3f052729fe6f29, #block-fb133884d63f0b03e172, #block-057f810f3a451851694d, #block-6dcf57ee364cca147d9d, #block-5d7b73f4d74d86d6dccc, #block-0a3a6f11d4961ffdcd84, #block-858a16f05c26e1f08aed, #block-74acbaff8d58b5939dbf, #block-cd598cd8b64cfa51aeae. { opacity: 0; transition: all 0.1s ease; } .show { opacity: 1 !important; transition: all 0.1s ease; } </style>

Site URL: https://brass-sphere-xyd7.squarespace.com/milestone-map Password: squarespace1 I have a page on my site with a series of 20 image blocks containing numbered gems. There are hover effects applied to the image blocks. But I am wondering if it is also possible to add a feature where when you click on one of the numbered gems, a different text block will reveal itself in the middle? I've attached a screenshot below. @tuanphan I see you did something similar for this user, where clicking on 4 different headlines revealed 4 different text boxes. I tried duplicating using my image blocks instead but I couldn't figure it out. I saw you asked the user to create the 4 text blocks. I created 20 text blocks that I would like to have all hidden, only to be revealed when their corresponding numbered gem is clicked. Is this possible? Thank you!

@tuanphan THANK YOU!

@tuanphan Sorry about that. URL: https://okra-perch-nget.squarespace.com/ Password is squarespace1 I've attached a screenshot of the issue in the section below. You can see that when the image of Zeus is hovered over, it's edges on the left and right aren't above the images on either side.

I'm trying to use css to create an effect so that when you hover over the images in a section, each image scales up with a drop shadow so it looks like it comes forward. The images are close together so when they scale, I want the hovered image to always be in the front so it is stacked above the images it is next to as it's hovered over. I found information about changing the z-index to a low number and then changing it to a higher number upon hover (which I did in the code I'm using). But maybe something is overriding this because still only one image will actually come forward above the others. The code I am using is listed below. Any help would be greatly appreciated! Code: section[data-section-id="67028027e84796476b768b81"] { .sqs-block-image { transform:scale(1); transition:ease-in-out 500ms; opacity:.65; z-index: 1; position: relative; &:hover { transform:scale(1.1); -o-transition:.3s; -ms-transition:.3s; -moz-transition:.3s; -webkit-transition:.3s; transition:.3s; opacity:1; box-shadow: 7px 7px 30px #000000; z-index: 1000; } } }

@tuanphan I just came across this thread and was wondering if there was a code to change the thumbnails to a custom image under a slide show? Thanks!

I am creating a Portfolio gallery and am wondering if I can add a body of text that appears over the thumbnail when you over? I'd like to keep the Page Titles exactly as they are, but when you hover and the image is revealed, I'd like a a description of the portfolio to appear. Thank you.