Exileking Posted July 9 Share Posted July 9 (edited) Hello!! I am looking to add a hover state on top of these images where white text will overlay and darken the image below? Any help? https://www.jefferyl.com/work Edited July 9 by Exileking Add Link to comment
HoaLT Posted July 9 Share Posted July 9 1 hour ago, Exileking said: Hello!! I am looking to add a hover state on top of these images where white text will overlay and darken the image below? Any help? Share your URL here so we can check and give right solution Exileking 1 Press 👍 or mark my comment as solution if you find my sharing useful 🆒 Squarespace pinchzoom lightbox plugin (affiliate link) 👁🗨 360 degree photo viewer (affiliate link) Link to comment
Exileking Posted July 9 Author Share Posted July 9 Whoops my apologies! Here we go! And i added it above. https://www.jefferyl.com/work Link to comment
Lesum Posted July 9 Share Posted July 9 @Exileking Hi! You can add this code under Website > Pages > Website Tools > Custom CSS to display white text with a dark overlay on the hover state of images. This code is intended to work only on the work page. If you want to apply the code to other pages, simply add the page collection ID followed by a comma in the first line of the code: #collection-65443f8483de252080147860 { .sqs-block-image-link img { z-index: 10; } .sqs-block-image-link::before { content: "view project"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 16px; opacity: 0; transition: opacity 0.3s ease-in-out; pointer-events: none; z-index: 12; } .sqs-block-image-link::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.3s ease-in-out; z-index: 11; } .sqs-block-image-link:hover::before, .sqs-block-image-link:hover::after { opacity: 1; } } Johansson 1 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
Exileking Posted July 9 Author Share Posted July 9 Is it possible to mimic this text and look? Id like the image to fade and the white text be centered with the name of the project? Link to comment
HoaLT Posted July 9 Share Posted July 9 20 minutes ago, Exileking said: Is it possible to mimic this text and look? Id like the image to fade and the white text be centered with the name of the project? Try this code #collection-65443f8483de252080147860 .sqs-block-image-link::before { content: "view project"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; opacity: 0; transition: opacity .3s ease-in-out; pointer-events: none; z-index: 12; /*additional style*/ font-family: pixChicago; width: 100%; font-size: 12px; text-align: center; } Exileking 1 Press 👍 or mark my comment as solution if you find my sharing useful 🆒 Squarespace pinchzoom lightbox plugin (affiliate link) 👁🗨 360 degree photo viewer (affiliate link) Link to comment
Lesum Posted July 9 Share Posted July 9 @Exileking With the current code, you have to update the code for each image to display the project name, resulting in hundreds of lines of code 🙂. You didn't mention displaying the project name, so I wrote the code as a general solution for all images. If you add the project names as the alt text for each image (See screenshot), the project name can be displayed on hover with a custom script, and you won't have to update the code for each project with this approach. Exileking 1 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
Exileking Posted July 10 Author Share Posted July 10 (edited) @Lesum Im not sure what script you are referring to? I added the alt text to the first icon but I didnt see anything happen. Any suggestion? Edited July 10 by Exileking Update Link to comment
Exileking Posted July 10 Author Share Posted July 10 @HoaLT Sorry mate that did not work? Link to comment
Lesum Posted July 10 Share Posted July 10 1 hour ago, Exileking said: @Lesum Im not sure what script you are referring to? I added the alt text to the first icon but I didnt see anything happen. Any suggestion? I don't see any alt text in the first image on the work page. I haven't shared any script yet; I still need to write it 🙂 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
Exileking Posted July 10 Author Share Posted July 10 Ahhh got ya! I was confused for a second. I just went through and added alt text for all of those images. Link to comment
Lesum Posted July 10 Share Posted July 10 @Exileking Here's the solution according to the requirements you mentioned last time. The code will only apply to an image if it has both alt text and a linked URL. First add this code in Website > Pages > Website Tools > Code Injection > Header <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script> $(document).ready(function() { $('.sqs-block-image-link').each(function() { var altText = $(this).find('img').attr('alt'); var overlay = $('<div class="fluidImageOverlay"></div>').text(altText); $(this).append(overlay); }); }); </script> Then add this code in Website > Pages > Website Tools > Custom CSS #collection-65443f8483de252080147860 { .sqs-block-image-link img { transition: opacity 0.4s ease-in-out; } .sqs-block-image-link .fluidImageOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; color: white; text-align: center; opacity: 0; transition: opacity 0.4s ease-in-out; display: flex; justify-content: center; align-items: center; font-family: 'pixChicago' !important; font-size: 14px; text-transform: lowercase; } .sqs-block-image-link:hover .fluidImageOverlay { opacity: 1; } .sqs-block-image-link:hover img { opacity: 0.2; } } If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
Exileking Posted July 10 Author Share Posted July 10 (edited) @Lesum By any chance is there a way to do this without code injection? I dont have the business plan that uses code injection? Edited July 10 by Exileking Edit Link to comment
HoaLT Posted July 10 Share Posted July 10 (edited) Like @Lesum mentioned above, if you do not use the javascript code which is only available on business plan, there is only one way to do: 1. Setup a general css style for all image blocks with pseudo but not add the content: .sqs-block-image-link::before { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; opacity: 0; transition: opacity .3s ease-in-out; pointer-events: none; z-index: 12; font-family: pixChicago !important; width: 100%; font-size: 12px; text-align: center; } 2. Then for each image block, use one css code block to provide it hover text #block-0b32dd9e54cce7925857 .sqs-block-image-link::before { content: 'hover text for oarrange image'; } #block-8a26635bc7b309d521c2 .sqs-block-image-link::before { content: 'hover text for the boy image'; } ... Use the following extension to get block id: Squarespace finder ID It means that the more blocks you have, the more css code you need to implement Edited July 10 by HoaLT Press 👍 or mark my comment as solution if you find my sharing useful 🆒 Squarespace pinchzoom lightbox plugin (affiliate link) 👁🗨 360 degree photo viewer (affiliate link) Link to comment
Exileking Posted July 10 Author Share Posted July 10 @HoaLT I added in the above code and the code below it but I still dont see any hover states? Link to comment
Lesum Posted July 10 Share Posted July 10 @Exileking As I mentioned in my previous comment, without injecting the code in Code Injection, you will need to update the code for each image. First, add this block of code in Website > Pages > Website Tools > Custom CSS. This block of code applies to all images. #collection-65443f8483de252080147860 { .sqs-block-image-link img { transition: opacity 0.4s ease-in-out; } .sqs-block-image-link::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; color: white; text-align: center; opacity: 0; transition: opacity 0.4s ease-in-out; display: flex; justify-content: center; align-items: center; font-family: 'pixChicago' !important; font-size: 14px; text-transform: lowercase; } .sqs-block-image-link:hover img { opacity: 0.2; } .sqs-block-image-link:hover::before { opacity: 1; } } Then for the first project titled "tropicana", you can add this code in Custom CSS #block-0b32dd9e54cce7925857 .sqs-block-image-link::before { content: "tropicana"; } For the second image, #block-8a26635bc7b309d521c2 .sqs-block-image-link::before { content: "123 darkside"; } As you can see, for the rest of the projects, you just need to copy and paste the code block right above, change the block ID, and add the project name inside the content in the code. You can use this tool to find the block ID of the images: Squarespace ID Finder Hope that helps. If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
Johansson Posted September 12 Share Posted September 12 On 7/9/2024 at 10:45 PM, Lesum said: @Exileking Hi! You can add this code under Website > Pages > Website Tools > Custom CSS to display white text with a dark overlay on the hover state of images. This code is intended to work only on the work page. If you want to apply the code to other pages, simply add the page collection ID followed by a comma in the first line of the code: #collection-65443f8483de252080147860 { .sqs-block-image-link img { z-index: 10; } .sqs-block-image-link::before { content: "view project"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 16px; opacity: 0; transition: opacity 0.3s ease-in-out; pointer-events: none; z-index: 12; } .sqs-block-image-link::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.3s ease-in-out; z-index: 11; } .sqs-block-image-link:hover::before, .sqs-block-image-link:hover::after { opacity: 1; } } This worked so smooth! I have one question, how could I specify a custom font? Link to comment
tomo1911 Posted September 12 Share Posted September 12 Hi can you supply the code, but no hover aspect, just show the alt text all the time? Link to comment
tomo1911 Posted September 12 Share Posted September 12 On 7/10/2024 at 3:54 AM, Lesum said: @Exileking Here's the solution according to the requirements you mentioned last time. The code will only apply to an image if it has both alt text and a linked URL. First add this code in Website > Pages > Website Tools > Code Injection > Header <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script> $(document).ready(function() { $('.sqs-block-image-link').each(function() { var altText = $(this).find('img').attr('alt'); var overlay = $('<div class="fluidImageOverlay"></div>').text(altText); $(this).append(overlay); }); }); </script> Then add this code in Website > Pages > Website Tools > Custom CSS #collection-65443f8483de252080147860 { .sqs-block-image-link img { transition: opacity 0.4s ease-in-out; } .sqs-block-image-link .fluidImageOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; color: white; text-align: center; opacity: 0; transition: opacity 0.4s ease-in-out; display: flex; justify-content: center; align-items: center; font-family: 'pixChicago' !important; font-size: 14px; text-transform: lowercase; } .sqs-block-image-link:hover .fluidImageOverlay { opacity: 1; } .sqs-block-image-link:hover img { opacity: 0.2; } } Hi Can you supply the code without the hover, text to appear all the time over the image, makes it a clickable link image with text Link to comment
Lesum Posted September 13 Share Posted September 13 On 9/12/2024 at 6:58 AM, Johansson said: This worked so smooth! I have one question, how could I specify a custom font? @Johansson Hi! You just need to add this line in the second block of code, replacing 'add-your-custom-font-here' with your custom font name. font-family: 'add-your-custom-font-here' !important; This is the block of code I’m referring to where you should add the line above. .sqs-block-image-link::before { content: "view project"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 16px; opacity: 0; transition: opacity 0.3s ease-in-out; pointer-events: none; z-index: 12; font-family: 'add-your-custom-font-here' !important; } Johansson 1 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
Lesum Posted September 14 Share Posted September 14 On 9/12/2024 at 11:17 AM, tomo1911 said: Hi Can you supply the code without the hover, text to appear all the time over the image, makes it a clickable link image with text @tomo1911 Hi! Keep the code you added in Code Injection > Header and replace the code you added in Website > Pages > Website Tools > Custom CSS with the following: #collection-65443f8483de252080147860 { .sqs-block-image-link .fluidImageOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; color: white; text-align: center; opacity: 1; transition: opacity 0.4s ease-in-out; display: flex; justify-content: center; align-items: center; font-family: 'pixChicago' !important; font-size: 14px; text-transform: lowercase; } } Johansson 1 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? 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