willmeighan Posted December 6, 2023 Share Posted December 6, 2023 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! Link to comment
tuanphan Posted December 9, 2023 Share Posted December 9, 2023 #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) Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Quadrant Posted April 25 Share Posted April 25 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! Link to comment
tuanphan Posted April 27 Share Posted April 27 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Quadrant Posted May 3 Share Posted May 3 (edited) 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! Edited May 3 by Quadrant Link to comment
tuanphan Posted May 5 Share Posted May 5 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Quadrant Posted May 7 Share Posted May 7 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? Link to comment
tuanphan Posted May 9 Share Posted May 9 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Quadrant Posted May 10 Share Posted May 10 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> Link to comment
tuanphan Posted May 12 Share Posted May 12 I don't know this, need to check your site backend (check from edit mode) Quadrant 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment