hello_studiofrey Posted April 18 Share Posted April 18 Hello, I would like to add a hover effect on the image block to display the project title. Basically the same thing that works well on the Portfolio page. I haven't found in the forum if anyone has figured out a solution using custom code? I am attaching a place on the homepage where I would like to have this hover effect inserted. Also, I'm attaching the same effect that works well on the Portfolio page. I would basically like to achieve the same thing on the homepage. https://dreisicht.squarespace.com/ pw: SF2024 Thank you very much for your help! Natasa Link to comment
Beyondspace Posted April 18 Share Posted April 18 11 minutes ago, hello_studiofrey said: Hello, I would like to add a hover effect on the image block to display the project title. Basically the same thing that works well on the Portfolio page. I haven't found in the forum if anyone has figured out a solution using custom code? I am attaching a place on the homepage where I would like to have this hover effect inserted. Also, I'm attaching the same effect that works well on the Portfolio page. I would basically like to achieve the same thing on the homepage. https://dreisicht.squarespace.com/ pw: SF2024 Thank you very much for your help! Natasa You can try adding to Home > Design > Custom Css section[data-section-id="661e9aa92a1d6413ca9b2fdb"] .sqs-block.image-block.sqs-block-image .sqs-block-image-link:after { content: ''; display: block; background: rgb(218,213,206); opacity: 0; position: absolute; top:0; left: 0; width: 100%; height: 100%; } section[data-section-id="661e9aa92a1d6413ca9b2fdb"] .sqs-block.image-block.sqs-block-image .sqs-block-image-link:hover:after { opacity: 0.6; transition: opacity 0.5s; } Here is my testing Let me know how it works on your site BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
hello_studiofrey Posted April 25 Author Share Posted April 25 @Beyondspace Thank you very much for the code and your help! I appreciate it. The overlay works well and I was able to insert the title, however, as those are two projects, I would need different titles for each. Also, I'm not sure how to adjust the code to display the text in the middle and in a different font? Could you please help me out with that? Thank you very much! Link to comment
tuanphan Posted April 27 Share Posted April 27 @hello_studiofrey To make text align center, you can add CSS code like this (and don't remove your current code) section[data-section-id="661e9aa92a1d6413ca9b2fdb"] .sqs-block.image-block.sqs-block-image .sqs-block-image-link:after { display: flex; align-items: center; justify-content: center; font-family: monospace; } To change text, I see you used a code like this, just change text in the 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
hello_studiofrey Posted May 3 Author Share Posted May 3 Thank you @tuanphan for your help! The text is now centered, which is perfect, but if I change the text in the "content" it will change for both images, however they are two different projects with two headings. It would be ideal if the headings were not set via the code, as our client would be able to swap the projects on the homepage at will and not have to edit the code each time. However, if this is not possible, then of course at least via code should be an option. Thank you! Link to comment
tuanphan Posted May 5 Share Posted May 5 On 5/3/2024 at 3:03 PM, hello_studiofrey said: Thank you @tuanphan for your help! The text is now centered, which is perfect, but if I change the text in the "content" it will change for both images, however they are two different projects with two headings. It would be ideal if the headings were not set via the code, as our client would be able to swap the projects on the homepage at will and not have to edit the code each time. However, if this is not possible, then of course at least via code should be an option. Thank you! If you don't want to use code to add text, and you don't use ALT, you can add text via ALT, then I will give code to turn ALT to text. What do you think? 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
hello_studiofrey Posted May 6 Author Share Posted May 6 @tuanphan there are texts in ALT, could you please share code to turn ALT to text? thank you so much! Link to comment
hello_studiofrey Posted May 13 Author Share Posted May 13 @tuanphan any feedback on a mentioned code? thank you Link to comment
tuanphan Posted May 27 Share Posted May 27 On 5/6/2024 at 6:50 PM, hello_studiofrey said: @tuanphan there are texts in ALT, could you please share code to turn ALT to text? thank you so much! Use this to Last Line in Website Tools > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(function(){ $('.fe-661e9aa92a1d6413ca9b2fda .image-block img').each(function(){ $el = $(this); var style = $el.attr('style'); $el.attr('style',''); $el.parent().attr('style',style); }); //Moves the inline styles $(".fe-661e9aa92a1d6413ca9b2fda img").each(function(){ var title = this.alt; $('<div class="t-caption">'+ title +'</div>').insertAfter($(this).parent()); }); }); </script> <style> .t-caption { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; text-align: center; z-index: 99999; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #dad5ce; opacity: 0; pointer-events: none; } div.image-block:hover .t-caption { opacity: 0.8; } </style> 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
hello_studiofrey Posted May 27 Author Share Posted May 27 Thank you very much @tuanphan the code works well but it has one issue, the code will stretch my left photo wide. Please see the screenshots below of the picture without the code and after inserting the code. How can I fix this? Thanks! Link to comment
tuanphan Posted May 29 Share Posted May 29 On 5/27/2024 at 2:12 PM, hello_studiofrey said: Thank you very much @tuanphan the code works well but it has one issue, the code will stretch my left photo wide. Please see the screenshots below of the picture without the code and after inserting the code. How can I fix this? Thanks! Use this code under code I sent <style> section[data-section-id="661e9aa92a1d6413ca9b2fdb"] .image-block.sqs-block-image .design-layout-fluid .fluid-image-container .content-fill img { height: auto !important; } </style> 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
hello_studiofrey Posted May 30 Author Share Posted May 30 Thank you for the code @tuanphan, now the picture is not centred but it only shows the top of the image. Please see the screenshot attached. For now I "fixed" it by cropping the image into square format but it would be great if there's some adjustment in the code possible so that it always takes the middle part of the image. I know you can adjust this normally in the edit mode but I tried it and it doesn't work. Link to comment
tuanphan Posted June 1 Share Posted June 1 On 5/30/2024 at 7:32 PM, hello_studiofrey said: Thank you for the code @tuanphan, now the picture is not centred but it only shows the top of the image. Please see the screenshot attached. For now I "fixed" it by cropping the image into square format but it would be great if there's some adjustment in the code possible so that it always takes the middle part of the image. I know you can adjust this normally in the edit mode but I tried it and it doesn't work. You can create a test page with original image, I can check code again easier. 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
hello_studiofrey Posted June 10 Author Share Posted June 10 @tuanphan here is a test page with original image: https://dreisicht.squarespace.com/home-2 (pw: SF2024) thank you! Link to comment
tuanphan Posted June 12 Share Posted June 12 On 6/10/2024 at 3:09 PM, hello_studiofrey said: @tuanphan here is a test page with original image: https://dreisicht.squarespace.com/home-2 (pw: SF2024) thank you! I still can't find a way to fix this. I will try test and let you know when you found a solution 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
hello_studiofrey Posted June 19 Author Share Posted June 19 @tuanphan any luck in finding the solution? 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