Quadrant

Thank you! And it's not an error message, it just shows the attached, saying it can't connect. But it's fine on the actual site. I only have this happen when I click the link on the backend in my pages. Not sure if it's code related? This is what I'm using: <style> #block-yui_3_17_2_1_1713915846721_5545 { cursor: pointer; pointer-events: auto; } #block-yui_3_17_2_1_1713915846721_5545 p { pointer-events: none; } </style> <script> document.addEventListener("DOMContentLoaded", function() { var block = document.getElementById("block-yui_3_17_2_1_1713915846721_5545"); block.onclick = function() { window.location.href = "https://www.mugacarpentry.com/muga-gallery"; } }); </script> <style> #block-30d0b584b8e65003d366 { cursor: pointer; pointer-events: auto; } #block-30d0b584b8e65003d366 p { pointer-events: none; } </style> <script> document.addEventListener("DOMContentLoaded", function() { var block = document.getElementById("block-30d0b584b8e65003d366"); block.onclick = function() { window.location.href = "https://www.mugacarpentry.com/early-work"; } }); </script> <style> #block-712a1d835251f6c1ef7f { cursor: pointer; pointer-events: auto; } #block-712a1d835251f6c1ef7f p { pointer-events: none; } </style> <script> document.addEventListener("DOMContentLoaded", function() { var block = document.getElementById("block-712a1d835251f6c1ef7f"); block.onclick = function() { window.location.href = "https://www.mugacarpentry.com/current-projects"; } }); </script>

yes! that's it! also, i added code to make the entire block clickable, and it works, but it the backend of squarespace, I get an error message if i click on the picture. is that normal?

Ah! I'm so sorry, I missed the notification. I didn't realize the password was on either. It's Muga25. I also changed the urls. It's now: https://www.mugacarpentry.com/portfolio. I was able to get the links to work correctly (I think), but I still can't figure out the color transition. Thanks!

@tuanphan, i'm trying to do the same thing as requested above on my website. Can you help? I already have css in place to change the background color on hover, but i'd like to change the text color from black to white at the same time. I'd also like to make each block clickable to open up another page. The website is: https://www.mugacarpentry.com/portfolio-option-1. Thanks!

@creedon, for what it's worth, I just tried taking this bit of code out, because I think that's what was causing the individual lines of text to change color on hover (including scrolling over text in the footer). when i remove it, the only issue seems to be how slowly the text transitions colors even though i have it set to 0s. 😕 /* apply the hover effect to h4 elements within .sqs-block-content */.sqs-block-content:hover .sqsrte-text-color--lightAccent:hover{ color: #444441 !important; /* change text color to black on hover */ transition: color 0.05s ease; /* add transition for smooth effect */}

Thanks for the reply. Actually, all the block ids I'm concentrating on are listed in the code (6 of them). The others were meant to show overlay colors to my client. Sorry for any confusion. So, it's just the first set of 6 images/text blocks that I'm trying to get the effect to work for. You should be able to see that it's transitioning correctly colorwise but the transition is super slow and disjointed. Like, you hover and the background changes and then the text color fades in after that. Hope that makes sense.

ok. after playing around with this for far too long, the color transitions are correct. but...it still transitions too slowly. if i set the transitions to 0s though, each line of text changes immediately only when scrolling over them and THEN all the text fades into the correct color which makes it look glitchy. so, if anyone can figure out a way to make this seem a little smoother, i'm all ears. otherwise, i think it's the best fix i'll be able to get. /* set the initial background color and text color */ #block-4d9159bed5c68c86d676, #block-5fe23bf021cbdac4b243, #block-58052db15bcb402167b3, #block-362f90c2afaf8844ec0c, #block-75ac13840ab92eacc286, #block-569f7648aaa626926741 { background: rgba(68, 68, 65, 0.5); /* set a dark grey color with 50% opacity */ padding: 1px; text-align: center; color: #f8f0e2; transition: background-color 0.05s ease, color 0.05s ease; /* add transition for smooth effect */ } /* apply the hover effect to all the blocks */ #block-4d9159bed5c68c86d676:hover, #block-5fe23bf021cbdac4b243:hover, #block-58052db15bcb402167b3:hover, #block-362f90c2afaf8844ec0c:hover, #block-75ac13840ab92eacc286:hover, #block-569f7648aaa626926741:hover { background: rgba(248, 240, 226, .5); /* change background color to transparent beige on hover */ color: #444441 !important; /* change text color to #444441 on hover */ } /* apply the hover effect to all the text within the blocks */ #block-4d9159bed5c68c86d676 *, #block-5fe23bf021cbdac4b243 *, #block-58052db15bcb402167b3 *, #block-362f90c2afaf8844ec0c *, #block-75ac13840ab92eacc286 *, #block-569f7648aaa626926741 * { color: inherit; transition: color 0.05s ease; /* add transition for smooth effect */ } /* apply the hover effect to h4 elements within .sqs-block-content */ .sqs-block-content:hover .sqsrte-text-color--lightAccent:hover{ color: #444441 !important; /* change text color to black on hover */ transition: color 0.05s ease; /* add transition for smooth effect */ }

@tuanphan you're good with these things. 😁 any idea why I can't get the text to transition from dark to light on hover? everything other part of the effect is perfect!

@abibacon i tried it but it didn't work either. 😕

@AndyB thanks but it didn't work. 😕

Hi @abibacon. I have a text block with a transparent background over an image block. So, it's the text block background and text colors I want to change on hover (and I want to keep the background transparency).

Hello. I am using the color codes and css below to make certain homepage images have a transparent dark grey overlay with beige text change to a transparent beige background with dark grey text on hover (basically just switching colors on hover). However, the text is staying beige, even when adding "important" to the code. Not sure what the issue is. If someone could figure out how to make the hover text grey, I'd be so grateful. Thanks! website: www.quadrant25.com pw: Quadrant25 Cream color codes: RGB: 248, 240, 226, HEX: #f8f0e2, HSL: 38, 61, 92 Grey color codes: RGB: 68, 68, 65, HEX: #444441, HSL: 60, 2, 26 /* set the initial background color and text color */ #block-4d9159bed5c68c86d676, #block-5fe23bf021cbdac4b243, #block-58052db15bcb402167b3, #block-362f90c2afaf8844ec0c, #block-75ac13840ab92eacc286, #block-569f7648aaa626926741 { background: rgba(68, 68, 65, 0.5); /* set a dark grey color with 50% opacity */ padding: 1px; text-align: center; color: #f8f0e2; transition: background-color 0.3s ease; /* add transition for smooth effect */ } /* apply the hover effect to all the blocks */ #block-4d9159bed5c68c86d676:hover, #block-5fe23bf021cbdac4b243:hover, #block-58052db15bcb402167b3:hover, #block-362f90c2afaf8844ec0c:hover, #block-75ac13840ab92eacc286:hover, #block-569f7648aaa626926741:hover { background: rgba(248, 240, 226, 0.5); /* change background color to transparent beige on hover */ color: #444441 !important; /* change text color to #444441 on hover */ }

super helpful, thank you!

Hi, actually, I didn't solve it. I had a client meeting and was showing them an option for the logo. This is just one image edited to be on top of the other and then saved as one image. We'd still like to do what I mentioned in the initial post. Thanks!

Thanks for the info. You can disregard. I decided to try something else.