Reveal Text on Hover in Squarespace // Squarespace Tutorial - Fluid Engine Hover Effects
Вставка
- Опубліковано 3 жов 2024
- Hover over an image - see some text. Sounds simple right? Well thanks to CSS, it totally is. And this tutorial will teach you how to create that hover effect in Squarespace.
- -
Learn more about custom code for Squarespace in my free class at insidethesquar...
- -
This tutorial will teach you how to create a hover effect that shows text when you hover over an image. It’s for the latest version of Squarespace known as 7.1 and wont work for older versions built on 7.
There are five main steps to this tutorial:
Step 1: Add the image
Step 2: Add the text
Step 3: Grab the text block ID
Step 4: Customize the code below
Step 5: Edit the mobile view, because there is no cursor on a hover, so we need to make this view look great!
Here is the chrome extension I mention in the video. I am not associated with it or its creators, just a fan: tchrome.google....
Here is the code tutorial. Be sure to change up the block ID so it’s the same one as your text block, and feel free to change the transition timing!
@media only screen and (min-width: 640px){
#block-12345 {
opacity: 0;
transition: opacity 1s
}
#block-12345:hover {
opacity: 1;
transition: opacity 1s
}
}
- -
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸
Use my affiliate link and code PARTNER10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎
🔗 PARTNER10 → insidethesquar...
- -
🤩 Download over 100+ pages of custom codes and pro tips for customizing Squarespace in one awesome PDF. Order the Squarespace CSS Cheat Sheet, available now at 👉 insidethesquar...
---
🙋 Need some help? Visit insidethesquar... to see my current support options.
---
🥰 SUPPORT MY CHANNEL → paypal.me/insi...
💻 WEBSITE → insidethesquar...
📧 NEWSLETTER → insidethesquar...
🤳 INSTAGRAM → / thinkinsidethesquare
👍 FACEBOOK → / insidethesquare
📌 PINTEREST → / insidethesquare
---
⚠️ IMPORTANT CSS UPDATE ⚠️ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation!
To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: ua-cam.com/video/euJqHXs_L1M/v-deo.html
For anyone that it DOESN'T WORK, TURN OFF ANIMATIONS.
Thanks very much for the tutorial!
Great tip - I always forget that people actually use those 🤦♀️
OMG thank your for this, I was about to throw my laptop at the wall
THANK YOU!!! I was doing this exactly as described and the video and I could only get the hover effect to work while in edit mode. Turning off the animation now makes it work - thank you for thinking to post this!
@insideTheSquare Is there anyway to have the in place and the site wide animations? Or how would you suggest doing something like this?
@@andrewmatthews8498 Site-wide animations will limit the ability to use CSS for custom animations. There isn't an in-between option with Squarespace; unfortunately it's one or the other.
Thanks Becca! You always explain things clearly and help to spark creative ideas to keep my website fresh. I'm enjoying learning how to use Fluid Engine to full advantage. I appreciate you!
You are so welcome! 🤩 Your comment just made my day - thank you so much for letting me know! Do you mind if I take a screenshot to use?
Of course, reviews are everything!
Appreciate all that you share - I learn something new every single time!
Hi Becca! Thanks so much, this was so easy to follow and so helpful! Do you also have a video on how to click the boxes? I want to hover>see hover text>click the entire box>new page but I can only figure out how to add a hyperlink to the text (which isn't what I want). Thank you so much!
Great question! Creating content that changes based on a user function - like a click - required some advanced css, and is usually easier to program with a javascript plugin. Check out this podcast for more info: insidethesquare.co/podcast/38
@@InsideTheSquare Perfection! I got the inspiration to use the hover reveal trick with a button (rather than a text box) and it works perfectly!! Thank you!
@@alysiakang hey, I am also looking for a solution for the same problem you described in the first comment.
how did you solve it?
@@bertylam I solved it by doing the same thing with a button block instead of a text block!
Essentially, I created a secondary button design that has a square shape + 0px outline. Then I do all the same steps as Becca describes with the code to have it appear as you hover. Then just add your button link and you're all set. 😊
Thank you so much for this excellent tutorial ! :)
You're very welcome! :)
For Troubleshooting : if your not seeing anything work in recent versions make sure you make the page animations “none” and the custom css will work!! 🎉
Great tip - thank you for sharing!! 🙌
I was about to change jobs until i tried this, thank you
Thank-you! I was scratching my head why it wasn't working before ready your reply...
Where is that located ?
saameeee😂😂@@astraoptix
Great tutorial Becca - easy to follow along as usual and it's working great 🥳 As an addition to this video, I was wondering if you'd do one that shows us how to change the colour of the background please? I'm using this tip to recreate our team page and would love it if each photo had a different colour background on hover. I saw it on someone's website a few weeks ago and really loved how it looked. Thank youuuu! 🥰
Oooh I love this idea! I’ll definitely add this to my tutorial to-do list; stay tuned 😉\
@@InsideTheSquare 😘
@@InsideTheSquare Thank you for this awesome video - The effect is showing that it works in the edit screen, but I can't see it implemented live on the site...
Any Suggestions?
@@collectivelumination451 I'm having the same issue. Did you get a fix for this by chance?
Sooo helpful! I have been looking for this type of tutorial for like 2 hours! Thank you!
Yay! So happy I could help! 🙌🏻
Great video, thanks. Easy, to the point, got the job done.
You're welcome - thanks for letting me know this worked for you! 🙌
Excellent tutorial and still works! Thanks!
Awesome - thanks for letting me know! 🎉
Really really good. Big thanks for making a good thing easy to understand.
Your comment just made my day - thank you so much for letting me know! 💙
Thank you so muuuuuuuch! Always giving helpful tips to improve our websites! 🙏
Yay! So happy I could help! 🙌🏻 Your comment just made my day!
You are such a good teacher! Thank you for this!!
You are so welcome! 🤩 Your comment just made my day - thank you so much for letting me know!
Hello, Great video thank you for the help. Unfortunately everything works only when I'm in the edit view but does not work when I'm out of the edit view, any idea how I can fix this ?
Interesting! Try refreshing your cache, and make sure your page animations, found under Site Styles -> Animations, are set to none.
@@InsideTheSquare Thanks so much for that tip, I was no able to find a solution for that CSS working ony while editing.
@@javieramor5101 Hey there! I was having this same issue. Apparently the SS core code is overriding the custom CSS. To fix this, you need to use !important i.e. opacity:0 !important; --- that worked for me. Final code looked like this: @media only screen and (min-width: 640px) {
#block-12345 {
opacity:0 !important;
transition: opacity 1s;
}
#block-12345:hover {
opacity: 1 !important;
transition: opacity 1s;
}
}
@@DevEffects-g9y Thanks for that!
You're the best, Becca!! 🙏
Your comment just made my day - thank you so much ! 💙
What if you want to make the background color of the text transparent? So the text fades in to 100% solid, but the background fades in to only say 30 or 40%, so you can still see the image underneath even when the text is displayed on hover.
Great question! You can change the opacity to a percentage value in your code :)
Thank you, brand new to CSS & suuuuper helpful!
Your comment just made my day - thank you so much for letting me know! 💙
Super helpful, thank you for posting this!
You're so welcome - happy to help! :)
Extraordinary! outstanding!
Thank you - glad you found this helpful! :)
This still works as of May 2024, thanks!
Awesome - glad it worked for you! 🙌
Thanks so much for this! A couple of questions: 1) Image links no longer work with this effect - when the hover is active, the image can't be clicked. Is there any way around that? 2) Is there any way to specify the background color for the text block? Love your tips :)
I’m not sure why it would do that instead, but I’d be happy to help! Feel free to submit a code help request with more info here: insidethesquare.co/code-help
@@InsideTheSquare Thanks - I posted to a thread in the Circle forum on a similar problem and tagged you.
@@RikAhlberg Hi Rik - Did you ever get an answer on this? I'm having the same issue!
@@kileycox5047 I'm guessing that you also need to link the new text overlay to the desired page?
All you have to do is go to site styles and you will be able to change the color of the background instead of gray.
This video was published just when I needed it ! Thank you 🤩 I was wondering, is there a way to change the background colour of the text ?
Yes! I came here to ask exactly that 👍
Oooh I love this idea! I’ll definitely add this to my tutorial to-do list; stay tuned 😉\
This is soooo helpful. Thank you!!!
Yay! So happy I could help! 🙌🏻
Great tutorial! It all worked out well! I did it on images that is linked to other sites on the website -so you click on the picture and get to another site - but when i made the hoover it didn´t go to the other side - is it possible to make the hoover clickable so the text appears but you can still click on it?
Great question and yes! Even though we cant see the invisible layer, it's still there, so it need the link. Add a link to the text and you'll be good to go! 🙌
Thank you for the tutorial. The instructions were clear and easy to follow. I am wondering if you know how to blur or have a dark overlay of the image when the text appears as you hover so text is easier to read over a colorful picture.
Great question! You can add a slightly transparent background to the text block so it will cover the image with some color. use the opacity slider on the background so you can still see part of the image underneath :)
This was great!
Hi Becca, I've been using this code on my test website for a while now :). Just wondering, instead of hovering over images to reveal text, how similar/easy is it to use a text block that has a style background that when hovering over, reveals another piece of text within the same text block? Or reveals the piece of text on another text block located elsewhere on the same page?
Great question! The content does need to be related; you can reveal something based on an action of the container it's in. List sections might be a good idea for this, or classic editor image blocks! I have an updated video about hover effect basics here if you wanna check it out; might spark some ideas: ua-cam.com/video/omp_m_YVznE/v-deo.html
@@InsideTheSquare Thanks Becca, I will check the video out!
Thank you so much for this amazing tutorial! Is there any way to get this working for multiple images on the same page? I have tried to copy the code again underneath and use the second image/text blocks, but it seems to override the first blocks.
Great question - and yes! What you need to do is combine your block id selectors with a comma, like this:
@media only screen and (min-width: 640px){
#block-123, #block-456, #block-789 {
opacity: 0;
transition: opacity 1s
}
#block-123:hover, #block-456:hover, #block-789:hover {
opacity: 1;
transition: opacity 1s
}
}
Hi Becca,
Thanks for sharing! I was wondering what the best approach would be to add a link to the hover text box when selected to take you to another page. Any tips?
This is a great question! You can add a link to the text, but it wont apply to the whole block, so the text has to be clicked for it to work. If you want the entire space to be a clickable area, use a button set to fill (not fit) and place that over the area. Apply the opacity to that button so it will be fully visible and clickable on a hover. Hope that concept helps and best of luck with your project! :)
this is an awesome tutorial - you're tutorial style is very east to follow! I was wondering if there is an option for a change of text color when hovering? not the background of the text/button but just the text color in itself!
Hi Ashley! I have a few new text tutorials coming down the pipeline so stay tuned!
Hey Becca, love the tutorial! Is there a way of doing this exact thing but revealing text under text instead of an image? I want to essentially have just headings on my page, but upon hover they show the description. Thanks!!
Oooh I love this idea! I’ll definitely add this to my tutorial to-do list; stay tuned 😉
i have this same question!!
Thanks for the easy to follow tutorial! Curious - can you add hover text to video blocks as well?
Great question! I'll have to brainstorm on this one. If I am able to create a code for it, I'm sure it will make a great tutorial so stay tuned!
I asked chatgpt the same type of question and it gave me a code that works with mobile as well it just made the video a video container and the overlaying img a separate container and had class id s for them to activate with hover effect
Thank you very much for this, Becca! It worked on one page. Still, when I wanted to apply it on another page, it wouldn't work.
I would really appreciate your advice on the possible issues!
Thank you!
Interesting! It's hard to say what is overwriting your work without seeing the code you used; check out my troubleshooting tips here: insidethesquare.co/codehelp
Make sure you highlight the text on your image before you apply the link!
@@margottt510, thank you! As already mentioned, it worked perfectly on one page. But on the second one, it wouldn't.
Hello, Becca _ I'm doing something incorrectly - this works well in Edit mode! Once I've saved, it doesn't. I'm experimenting with the size of the image and the border width to see.
That doesn’t sound right! I would love to help - send me more info at insidethesquare.co/code-help
@@InsideTheSquare I've done it on one of the sites I manage and am getting the same thing! Looks perfect in Edit mode but not on the live site. On there, you can only see the coloured text boxes - no images whether you mouseover them or not.
@@InsideTheSquare OK! Intuition said _ take site off of animation (fade) I did, and now it's working. I'll continue fooling with the animations to make sure I've pin-pointed the problem. thank you
@@smae890 try removing (if applicable) the fade feature from animations. I did, and now it's working for me.
Same thing happening to me, once the animation is taken off it works but then the setting are off for the whole site. Is there a work around for this to keep other animations working and still have the effect?
This was an awesome tutorial! I'm taking over another person's work in helping a friend with their website and I can't seem to figure out where in the CSS panel to add this code. It does work in "edit" mode. Any help on where to add it in the panel, would be appreciated. It worked like a charm in my own personal website.
If it seems like another coat is overwriting this one, try adding it at the very end of your CSS collection, and use !important to the end of every value to make sure the browser pays attention to your code.
Thanks for the tutorial. If I wanted to do the opposite effect... for example I have created a section that is colored and has text on top of it. I would like to hover over the section to reveal an image. I created an image block the same size as my section. The hover effect works when I rollover the section, but the "before" (colored section with type) shows up as a completely blank section that is another color from my palette. Suggestions?
To set this up, you can add an image as the page section background, and then a full size text block on top. Add a hover{opacity:0} code to the text block and it should do the trick for ya! I hope that info helps and wish you the best of luck with your project :)
Thanks for the tutorial Becca. I have followed your steps exactly and it appears to work perfectly while I'm in the Squarespace developer preview mode but it's not translating to my site in a separate internet browser. Any idea why?
That is very interesting!! It’s hard to tell without seeing the code on your site, but try clearing your cache, and if it still doesn’t work, send me a link so I take a look: support-at-insidethesquare.co
Hi, first thanks so much for all of your great tutorials, they are really helpful. I am wondering if you have already made a tutorial for how to have video/gif play when the cursor hovers over. I cant seem to get the code right. Thanks again.
Great question! I haven't yet, but feel free to submit a code help request here: insidethesquare.co/code-help
Becca thanks so much for this, it's amazing!!
Quick question - I am using this technique and code to create text hovers over my existing text. I have three pieces of text that I need to create hovers for, but I find that I can only use the code for two hovers - when it comes to creating the hover for my third bit of text, it works but bumps off the effect applied to my first text hover.
Any ideas for how I can use the hover code three times on one page? Thanks in advance!!
Intetresting! You should be able to combine selectors to give them the same property by separating them with a comma. Here is an article on my site with some more info: insidethesquare.co/resources/css-symbols
Hey there! thank you for this great tutorial! I was hoping you could help me with something. Everything works great, but I would like to connect a link on the text so that it opens in a new page. When I am in edit mode and connect a link to it however, it doesn't seem to be able to be applied to it. Would you have any advice for me? thank you!!
I would love to help if I can! Feel free to submit a code help request with more info here: insidethesquare.co/code-help
Thank you! Exactly what I was looking for!
How would you get the text overlay to appear on tap on mobile though?
Great question! I'll have to brainstorm on this one; probably possible with some clever CSS. If I am able to create a code for it, I'm sure it will make a great tutorial so stay tuned!
@@InsideTheSquare Any update on this? I'd love this feature!
@@InsideTheSquare How to make it disappear on mobiles completely? Despite 640 px, it shows the text only on mobile and image is hidden... any advise please please
Thank you so much for the video. I have one question. Could you please tell me how can I link on the image of revealing text on hover ?
Great question! Feel free to submit a code help request here: insidethesquare.co/code-help
Thank you so much for this video! Could you please tell me how to transfer it on mobile version? ☺
Unfortunately I cannot - Mobile devices don't have cursors , so you cant have a mobile hover effect.
@@InsideTheSquare what about a "reveal text on click" for mobile version??? thanks for all the good content Becca!
@@Colin_Butler hi. did you find a solution?
Great tutorial, Becca! Thanks! I'm new to Squarespace. What kind of config-view is that? I have never seen that view of the configurator. You can precisely place blocks. How to get that view?
Fluid engine is the magic term 🙂
Hi Christian! You're right-- Fluid Engine is the magic term! ✨
In fact, I hosted a live workshop this summer allllll about Fluid Engine if you wanted to check it out: insidethesquare.co/fluid
hi becca! thank you :) really helpful. I have done the overlay and its working (yay). I just wanted to know if there was a way to add a "click-lightbox" feature so that the image can be expanded or click and connect to a shop product.
Great question! Feel free to submit a tutorial request at insidethesquare.co/suggest-tutorial
How would you do this for multiple image blocks? I tried to past the code multiple time with a different block ID but then non of them worked. Any help would be great! Thank you for the awesome tutorials!
Absolutely! Just separate the id with a comma to use it with multiple blocks. Here is an article with some more info: insidethesquare.co/resources/css-symbols
@@InsideTheSquare Thank you for this tip. When I do this only the last block ID is effected. Thoughts on why that might be?
excellent video~
Thank you very much! 😊
I got this to work. However, it will only work when the site is in edit mode. Once I click done, it's just a text box with a background. Go back into edit mode, and it works fine when I hover over the image. I do have other CSS on the site and that section. Mainly to create a 100% grid width on that section. I moved the hover effect CSS to the top of the list and still got the same result?
That doesn’t sound right! I would love to help - send me more info at insidethesquare.co/code-help and I’ll hop into your source code and take a look.
Hi Becca, thanks for the tutorial, was very easy to follow!
Unfortunately, though, I'm having an issue. When I'm in the editor, the changes are working just fine. But after saving everything and looking at my website live, the changes don't work. As soon as the page loads, the background and text load in front of the image and cover it. If I hover over the image, nothing happens.
Any idea what the issue might be? :(
In the custom css try adding an important tag to it
Opacity: 0 !important;
Transition: opacity 5s
Then add that next to all opacities
As Kevin said, try adding !important to the code and let me know what happens.
@@thekevster619 This is working for me, Thanks a lot Becca...
Hi Becca. First-time commenter long-time watcher. Can you explain if the reliability of yui IDs have changed. I recall reading that they break when a page is refreshed.
YUI’s do, but block ID’s do not! A block ID is unique to the block but the same on every page load on every browser. That’s what makes this chrome extension so helpful! chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff
Hi Becca I love your tutorials they have been a great help. So I'm having a problem where I have a row of images and I could get the first two to work with the hover and text reveal but the rest of the images in the row wont work using the same exact CSS code. I mean there is literally no difference in the images and they are all in the same section I just cant figure out why i cant get the others to work. If you could take a look it would be great. Thanks .
Hey Rayrnyc! That's super strange - can you send me a link to the page so I can take a look? You can reach me at hello-at-insidethesquare.co
@@InsideTheSquare Hey Becca, I messaged you through the contact form on your site.
Great video! Is there anyway to get the hover effect with coloured background so i still the original image as well as text? Messing around with the opacity also changes the opacity of the text and i do not want that.
Great question! You can edit the opacity of the background by replacing a solid color code with an RGBA. Here is more info about color codes: insidethesquare.co/colors
@@InsideTheSquare Hi, Thanks for responding. How would i add this extra bit of code?
This is great! How do I apply this same technique to multiple images on the same page?
You can use a unique block ID to target a specific thing on your site; check out this tutorial for more info: ua-cam.com/video/h8qfZdaATbU/v-deo.html
Becca,
Hope you're well. I just started using Squarespace a week or so ago & have come a long way. I do have something I cannot figure out for the life of me!!!!!!!!!! I'm building a website for my rental houses I'm wanting to rent out. I'm not great at this lingo, so bear with me here. I'm wanting to simplify it so I'm putting a contact form on the right side of the page, & I'm putting the pictures of the home on the left. I've got the contact form down with all of the bells and whistles thanks to your videos. But, I can't figure out the image piece. I'm wanting to have the primary image showing, & on that image I want to put a "multiple image icon" along with a button that says 19 more pictures. Then I want to put a link of some sort on the button or the "multiple image icon" that takes you to the rest of the pictures. I'd rather have that than all of the pictures on one page. I'd be cool with a slideshow too, but didn't see a template for that, that allowed a contact form to be on the same page. Sorry for this long message. I'd really, really, really appreciate it if you could point me in the right direction.
Oh yea, I've watched 100 videos of you this past week, and you might be the nicest person I've ever seen. Great personality & you do a great job.
Hi Colby! I'm so excited to have you in my corner of the web learning all things Squarespace! I have a few questions, so if you pop over here and fill out a code-help request, I'd love to help! I’d be happy to help! insidethesquare.co/code-help
Thank you!!!
Yay! So happy I could help! 🙌🏻
Hi there, is there a way to do this to a specific image within a gallery? I can't seem to figure that out. Thanks!
Great question - and technically - yes! But the type of gallery plays a critical role here. Gallery blocks vs gallery sections have different selectors, and we'll need to manipulate the caption placement to make it work. If you want to send me a link to the page on your site with the gallery you want to add this to, I'd be happy to help! You can reach me directly at support-at-insidethesquare-co
This worked for my first text/image hover block but when I try it for a second one on the same page with the same steps it doesn't work? The text box is still solid over the image
That's super strange 🤔 Try separating the selectors with a comma instead of creating additional lines. Hope that concept helps!
Hey Becca! This is great! Is it possible to hover over a text / link and make an image appear to the side ? Reveal image on hover over adjacent text? Thanks!
Great question! Feel free to submit a code help request here: insidethesquare.co/code-help
Hi Becca, Great tutorial. I've added these hover over text boxes to images but I now can't add a link to these blocks. Do you know how I would go about doing this?
Great question! I'd recomend removing the code to add your link to the text (highlight the text and click on the link option or press ctrl+k to add the link, and make sure you select apply!!) and I'd also recommend adding the link to the image for backup.
amazing thanks
Yay! So happy I could help! 🙌🏻
This is terrific, thank you. I tried it switching out a photo instead of a text box and it worked as well. So can we use this code for changing images on a hover as well?
Ooo! I haven't tried it personally, but if it works for you let me know!
@@InsideTheSquare Yes it worked. But I am trying the text on hover now and it is changing to text, but not changing back. I have double checked the code.
Yes, that is it, you have to turn off the animation, which I really like. Is there anyway around this?
Hi Becca, the code works, but i want that when the text is revealed, i can click on the text block and take me to another page. when i tried to link the page on the text block, it doesnt work. I saved and apply the link on the text block but it just goes to default.
You'll need to link the top layer - the image. Even if it's not visible, it's still there, so the link will still work! :)
2:47 instead of the back ground I want to do the blur I tried it with this code but when you're not hovering over the image is blurry all the time. Do you have code to do a blurry background? also is there a way it embed a link into it so you can click on it?
You can use a blur image filter, and add the active link to the top layer of content.
Great Tutorial! I assume I have to do this for each text block I add? Or could I just duplicate the text block I added to my first image and just change the text itself? And If I have to to this for each text bloc within my portfolio page, can I enter multiple IDs in the text we have to fill into CCS or do I have to enter that code for each text block? Thanks!
You'll have to do this for each text block.
Great tutorial! However whenever I try it it doesn't work. I do have other code in there, is there something else I should be adding?
It’s hard to say without seeing the code on your site - feel free to email me a link and I’ll take a look: support-at-insidethesquare.co
Is there any way to hide the image instead of the text? So the image is above and could be linked to another page? Now I can only link the text and it's so small compared to the image...
Good question! You can hide the top layer, but for your situation, maybe try using a button! Stretch it to fill the space and set the background color to transparent so it acts like a block of text with a large clickable space.
Alo! Thanks for a great tutorial, why it doesn’t work on the main page tho? Is it even possible to add custom CSS to main page on SS?? 🤔🤓
I’m not sure why it would do that instead, but I’d be happy to help! Feel free to submit a code help request with more info here: insidethesquare.co/code-help
You are so welcome! 🤩 Your comment just made my day - thank you so much for letting me know!
Thank you so much for the video. Is this the best format for wanting to create a portfolio page? I am trying to create my projects that one picture appears and you can click on that project picture to open the rest of the project picture. Does that make sense? Thank you
Hey Jenny, I go over the different page types in this tutorial here: ua-cam.com/video/_ntuvPvbDgI/v-deo.html
I hope that helps!
Hi Becca. This tutorial almost has the solution to my problem!!! Do you know how I can create a text box that appears on the screen - like a lightbox - when I hover over a gallery image? Quite a lot of text, so I don't want to be limited by the size of the image.... Can you help?!
Interesting question! I don’t have a code for that yet, but I bet I can modify my tool tip tutorial and come up with something 😉 I’ll add it to my tutorial to do list so stay tuned.
@@InsideTheSquare Thank you
Quick Question.
Do you need a separate block of CSS code for each text box? Or can you put all one after the other in the code block?
Great Question! Adding code to your site-wide CSS file under design > custom CSS will put your code on every page. But there are two ways to add code to a single page - check out this tutorial for more help: insidethesquare.co/singlepage
You can also use a unique block ID to target a specific thing on your site; check out this tutorial for more info: ua-cam.com/video/h8qfZdaATbU/v-deo.html Hope that helps! 💙
Hello! Thank you for this tutorial. I was wondering how to do this for multiple images (i.e. showing a bio on a team page for each person)?
Interesting question! You might be better suited to recreate this using a list section with a hover reveal effect for text. I don't have a tutorial on this yet, but I'll add it to my to do list. In the meantime, learn more about list sections here: insidethsquare.co/list
@@InsideTheSquare Thank you! I actually just repeated the same code with different block IDs - it's long, but it works!
Do you know if it's possible to get the text that's set to appear on hover on the desktop to be completely invisible on the mobile? I've found code that removes blocks from the mobile version but it does not seem to work with the hover effect code on the desktop.
Thank you!
Nevermind! I got it to work! :D
@media only screen and (min-width: 640px){
[#blockID] {
opacity: 0;
transition: opacity 1s
}
[#blockID]:hover {
opacity: 1;
transition: opacity 1s
}
}
@media only screen and (max-width: 640px){
[#blockID] {
display:none;
}
}
Really appreciate your tutorials! Thanks again.
This doesn't work for me, I copy and pasted from the description, I wrote it out word for word and it just doesn't work for text for me. It does however work for pictures but I really need it for text please help!!
You need to replace the filler text with your own unique ID. Every block of text you want to hide/reveal needs to be its own unique block. Then you can pull the block id using the chrome extension ( insidethesquare.co/chromeext ) and use that in the code, like this:
#block-123 {opacity: 0}
#block-123:hover {opacity:1)
When I change the time to 4 seconds "transition: opacity 4s" the transition doesn't change. Thoughts?
You can try adding !important after your values, and make sure the transition is also in the static state and not just the hover state. You can find more troubleshooting tips here: insidethesquare.co/code-help
is it possible to round the corners of the text block? I tried to put the border-radius command but is not working
Totally - but you don’t need code to do it! Click on the paint bucket icon to add a background to the text block, and adjust the border radius on the design tab there.
That works great, but now the images underneath are not clickable. When I try to link the text block above the image, SS does not remember it even after Save/Apply. Seems to be a bug. How would I get the links to work again?
The text link not working is definitely a Squarespace bug. I would remove your code and reach out to their official support team for help. I've found their live chat to be pretty responsive. Best of luck!
@@InsideTheSquare Will do. Unfortunate that SS is so buggy. thanks for the quick reply
Same problem here
Hi Becca! This may seem like a real rookie question, but when I click edit to add a background color to the text, only the text editor comes up (formatting) intead of the text block editor. What am I doing wrong?
Text blocks can be tricky - but especially when Squarespace changes them on us 😅 On the text editor, you'll see a paint can icon, to the right of alignment and just before the quote icon. That's how you can access the background... as of today anyway 😜
@@InsideTheSquare That worked perfectly! Thank you so much! 🥳
Hi Becca! Thank you so much for this video, but I have a small issue. This code seems to be working, but in my case, it only works when I edit my website. As soon as I save everything and want to check if everything is working perfectly, nothing seems to be functioning. The text is visible, and nothing changes when I hover over and move away from the image. It's really strange because in Edit mode, everything works for me!
Hi! I was digging through the comments because I was having the same issue, and I found the solution!
@thekevster619 said:
In the custom css try adding an important tag to it
Opacity: 0 !important;
Transition: opacity 1s !important
... Hope this helps!
Thank you very much! It really helped! Now everything is working for me!@@KAISTUDIOk
Thank you so much for this video - it worked great! It seems that the hover code disables the text box to be linkable to another page. Is there a workaround for this?
Great question Ren! A click action will work on the highest layer so make the image block clickable to the link, and it 😉
@@InsideTheSquare Thank you for the fast response! If the image is the highest layer, then the text box is no longer visible :( I am using the code you provided to reveal text on hover over an image, and ideally I would be able to click that box to another page. I've been searching forums and haven't been able to find a solution
@@renfuller6990 I'm a little confused but hopefully this explanation helps: the image has to be the highest layer, covering the text, so on a hover it reveals the text underneath. While it's not visible, it's still there, and still clickable, so it can be the link!
@@InsideTheSquare Oh my gosh, PERFECT!! THANK YOU :)
Can you hide the text box all together in the mobile view? I want to do this , but with two images overlaid to show a before and after effect. In the mobile view I'd prefer to only show the after image.
Great question! Using Fluid Engine, you can layer the two images and use the block id's to create a hover effect on desktop. On mobile, you wont need code - simply place the lower layer image that you want to display on the top :) For the code part, only use the top layer image id - the one that will disappear on a hover - like this:
#block-123:hover {opacity:0!important}
if you have more than one set of images, you can combine the effect with a comma, like this:
#block-123:hover, #block-456:hover {opacity:0!important}
Hope that info helps and best of luck with your project!
@@InsideTheSquare I will give this a try! Thank you
Thanks for this! Is it possible to to have another image appear on top of the previous on when I hover? Thanks!
I tried with an image and it seems to work!
Excellent! Glad you were able to find what works!
is there a way to change the transition style or is always 'fade'
Changing the opacity makes a fade but you can use any property/value combo you want, like transform scale, translate or even a creative filter or two.
How would I make the text appear below the image and not on the image on hover?
This is a great question - it depends on the type of text container you use. Check out this new video for more info: A Beginner’s Guide to Squarespace Hover Effects
ua-cam.com/video/omp_m_YVznE/v-deo.html
Hello Beca, Do you know why its only working on editingt section?So if I put it on actual preview, the hover isnt working. Thx in advance!
Huh - that is a strange issue! I'm honestly not sure; send a link to me and I'll take a peek at your code to see what's up: insidethesquare.co/codehelp
@@InsideTheSquare Hey there! I was having this same issue. Apparently the SS core code is overriding the custom CSS. To fix this, you need to use !important i.e. opacity:0 !important; --- that worked for me.
Hmmmm this doesn't work for me. Your banner one worked perfectly.
I've done it exactly as described. I don't see the changes instantly while adding the CSS. And they don't work while not in edit mode. In Edit mode the reveals work just fine. But when I then publish the site it doesn't work either.
Please help! It's probably a settings thing, but I don't know where to start!
Hey Ashby - super strange! Can you email a link to hello-at-insidethesquare.co? I’ll take a look when I’m back in the office tomorrow to see if I can help. If your site is it published yet, set it to password protected under site availability and I’ll be able to look at your code.
how to i acess this page of edit? when i select design on the image my options are online poster, etc, not fill
Sounds like you are using a classic editor image block; check out this article for more info: support.squarespace.com/hc/en-us/articles/205814528-Image-blocks#toc-classic-editor-layouts
Hi Becca, thank yo so much for the tutorial and all your others as well. They have been so helpful! I love this code and trick but I'm having an issue where the hover effect works while I'm in edit mode but then freezes on the static image when I save, not revealing the text when I hover. When I re-enter edit mode, it works again. Any thoughts on how to fix?
Oh no! Did you try adding !important to the end of the code?
I'm also having this issue!
That was it issue, I needed to make it more “important” thank you!
@@taylorlynnmesser Hey! Would you mind specify where you add the "!important"? I tried it but my issues remain :(
@@pan-pangou7103 I added it at the end of each section because I didn’t know where it should go 🤷🏼♀️
Is there a way to do this the other way around? For example, hovering over the text and an image appears
Great question! I’d be happy to help you create the perfect code! Submit a code help request with more info: insidethesquare.co/code-help
Will this work if the image I want the hover on is the cover of a project within a portfolio on squarespace? Thanks!!
It should! Just be sure your selectors are targeted correctly.
Hi Becca, can this be done with a button? The image/hover over text is a button?
Totally! Just use the button id and it should work perfectly ☺️ Good luck with your project!
Is there a way for this code to work without having to remove the site's animation settings? I'm finding it won't work unless theres no animation across the site.
Nope - unfortunately you can't overwrite site-wide animation for an individual element.
@@InsideTheSquare Thanks for the quick reply! So does that mean this effect will only work if there is no site wide animation?
Love this Becca, but it does not work if you have site animation on. Is there a way around that?
I’m not sure why it would do that instead, but I’d be happy to help! Feel free to submit a code help request with more info here: insidethesquare.co/code-help
I just discovered that if I use the "Flex" animation option the hover works for the text box. Paintbrush-animations-flex, presumably it works site-wide.
Is there a way to change the opacity so I can see the image peak out a bit more?
Yup! Just change the 0 or 1 in the code to the opacity of your desire.
@media only screen and (min-width: 640px){
#block-12345 {
opacity: 0;
transition: opacity 1s
}
#block-12345:hover {
opacity: 1;
transition: opacity 1s
}
}
Hard to find any sources to help with HOVER EFFECTS ON REGULAR TEXT (non-hyperlink). I assume this is a script? If I have regular text on my page, for instance "Bookkeeping". How do I make it so that when you hover over that text BOX, the color of the text changes? Again, this is non-hyperlink. THANKS!!!
You can target a block of text using its unique ID and add any property change you want to the hover state. Here is a tutorial with more info: ua-cam.com/video/Z3k1Pzto2WU/v-deo.html
@@InsideTheSquare You'r the best! Learned so much from you. Thank you so much.
Forgive my ignorance, Becca, but do you know if this works for 7.1 fluid engine? As the first margin-top will need to change depending on the screen size, when I set this, each time the screen size changes, the margin no longer suits. This even happens between the CSS editor and the view being active. Or am I doing something completely wrong?
Great question! it depends on the settings you are using but I’d be happy to help you create the perfect code! Submit a code help request with more info: insidethesquare.co/code-help
I absolutely love this but unfortunately I can't find a way to maintain the image or text as a link- any suggestions?
Also is there a way to change text color on desktop and mobile versions so that desktop text is one color and mobile text is another? I'm using white as the hover text color but it doesn't appear without a background color on mobile.
Saved and subscribed, thank you!
Hey did you find a work around? Im currently stuck in this same position with the image link and text. I tried just linking the text as I thought it would link the whole text box but it doesn't. It just does the text and then gives it an underline.
I’m not sure why it would do that instead, but I’d be happy to help! Feel free to submit a code help request with more info here: insidethesquare.co/code-help
How do I do this for multiple images on the same page? Say I have 4 images on a page and want to do the hover reveal 4 times once for each image.
If you’re changing the same property value for multiple blocks (in this example, opacity:0) you can separate all four of them by a comma in one line of code! Here is an article on my site with more info about symbols: insidethesquare.co/resources/css-symbols
Thank you@@InsideTheSquare . Suspected this was the case but wanted to be sure.
Hi Becca - thanks for sharing. I'd love to add a caption on hover using classic editor. I clicked on the link, but it seems to go to a video about rotating text. Am I looking in the wrong place? Lee
Hey Lee! I'm not sure what you mean by captions, but here is a list of all the hover tutorials i have on my blog: insidethesquare.co/hover-effects
@@InsideTheSquare Thanks Becca!
I'm not seeing her version 7 tutorial video. Can anyone help? Thanks.
I can! 😜 You can't create layers in version so this technique is invalid for older versions of Squarespace. You can create a similar effect with a poster image with a code like this:
.design-layout-poster .image-card-wrapper{opacity:0}
.design-layout-poster:hover .image-card-wrapper{opacity:1}
Hi！ How do I edit the hover effect of project on homepage？ I want to have more explaination when hover than just title
Interesting question! is your home page a portfolio page type with projects inside? if so, we can use some custom CSS to add a secondary line, but it will have to be done for every project. if you want more info send me an email (support-at-insidethesquare.co) and I'dd add this to my tutorial to do list :)