Create hover state for text block - change colours?

Hi, I'm working on a section of a homepage where I'm trying to show a variety of different technologies offered by a client.

There's currently a grid of 6 text blocks (which I've applied a background to, to make them look like sort of buttons). Is there a way to make the colour of the background and text change when hovering over?

And is there a way to make the whole "block" clickable, rather than having the "Learn more >" text that I'm currently using?

Thanks!

#1. You can share link to this page?

#2. We can use CSS code, my idea is use CSS absolute to make learn more cover whole block (then make learn more invisible with opacity 0 code)

On 12/8/2023 at 7:17 PM, tuanphan said:

#1. You can share link to this page?

#2. We can use CSS code, my idea is use CSS absolute to make learn more cover whole block (then make learn more invisible with opacity 0 code)

@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!

On 4/25/2024 at 10:21 AM, Quadrant said:

@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!

What is password?

On 4/27/2024 at 2:40 AM, tuanphan said:

What is password?

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!

On 5/3/2024 at 12:42 PM, Quadrant said:

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!

You mean these text?

On 5/5/2024 at 4:52 AM, tuanphan said:

You mean these text?

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?

On 5/7/2024 at 7:28 AM, Quadrant said:

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?

To change color to white on hover, use this CSS code

.fe-block-yui_3_17_2_1_1713915846721_5545:hover *, .fe-block-30d0b584b8e65003d366:hover *, .fe-block-712a1d835251f6c1ef7f:hover * {
    color: #fff !important;
}

Can you take a screenshot of error message?

20 hours ago, tuanphan said:

Can you take a screenshot of error message?

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>

I don't know this, need to check your site backend (check from edit mode)