Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'hover'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Selling & Scheduling Your Services
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Site URL: https://www.blueridgeresearch.com Hello, and thank you in advance for looking at my question. I am looking for CSS code that will create a dark mask and white "Learn More" button on images when hovered/tapped. The images are inside a Summary block. The code can create this action and apply to ALL summary blocks, rather than using a specific id for each one. Please see screen shot below to see illustration. My main question is for the dark mask and Learn More button, but it would be nice if the space below the image where the title and excerpt are pulled in could be a light gray and then turn darker with the hover/tap. I currently have the Summary Block title link disabled. I am using the Burke template. Here is an example of page that I'm working on. https://www.blueridgeresearch.com/home-1
  2. Site URL: https://antelope-bluebird-89a2.squarespace.com/ Hi everyone, I'm looking to migrate my site from a 7.0 template to the 7.1 Clarkson Template. Here is my old website: http://www.originexpeditions.org Here is the one I'm working on: https://antelope-bluebird-89a2.squarespace.com/ Sitewide password: thanksforhelping I have spent about 8 hours searching the Squarespace forums, internet, and even trying to learn CSS myself to resolve an issue I have with the Header Navigation Bar. In short: I want the navigation bar and its dropdown menus to appear as they did on my old site. Features that I'm talking about include: Text being highlighted upon hover (I've gotten this to work) A semi-transparent dropdown menu for folders with a width that conforms to the text of the longest link + a few inches of padding (see my old site) The currently viewed page having shaded text in the navigation The menu options /links beneath each category being aligned left, formatted in congruence with the folder title above Additionally, if there is a way to add the semi-transparent background of the dropdown menu to overarching category (IE: About or Expeditions) also, that would be great. If anyone has solutions to any or all of these requests I would greatly appreciate it. Thanks for your considerations, - Joe
  3. Site URL: https://innerelementspsychotherapy.com Hi there! I am wondering if anyone has custom CSS to add to change the color when the mouse is hovering over an item in a dropdown from the nav bar? Thank you!
  4. Site URL: https://www.swissariknife.com/ Hi there, Can anyone help me customize something on my site? I am looking to change the bottom pagination links on my portfolio projects from the project names to: Previous and Next I love everything about the styling, so I don't want that to change. Secondary request (if possible) is that I'd like the links to have a hover state of the color #ef233c My site password is: 7777 Any help is super appreciated. - Ari
  5. Site URL: https://www.folkmagik.com/calendar Hey there, just as it says; I was wondering how I can get rid of the time and address that shows up in the calendar pop up when you hover over an event. I've done a fair bit of searching but have come up short. Thanks so much in advance!
  6. Site URL: https://www.seascapejewellery.com/artworks 7.1, store page, hover image Hi, I have several products in this store but the alternative image that should show up when you hover, only works on the first one. The other products pages were duplicated from the original and that is the only difference I can find. It also happens on another store page but I'm not sure which products are original or duplicates there. Has this happened to anyone else and did you find a solution? https://www.seascapejewellery.com/artworks
  7. Site URL: https://the-goods.us/shop On my shop page (all products), anytime I hover over a product, square space shows the other images linked to that product. Is there a way to remove this animation/effect on the shopping page, so you only see one image. When customers clicks on individual product, I still want additional photos to be seen on its individual page.
  8. Site URL: https://ferret-porpoise-kz74.squarespace.com/ I have used a code to create an overlay caption to appear on grid gallery images whilst hovering... however I would like for the caption to sit at the bottom of the image rather than the top (as show). Any help would be fantastic! Many thanks!
  9. Site URL: https://www.whatadaycollective.com/artists Hello! I'm trying to find a way to display an image over text without success, that's why I'm posting here. The gallery/portfolio features aren't a solution as the text is scattered around the screen for aesthetic purposes. I'm building an artists page, therefore the goal would be to display a picture when hovering over each artist name. This is the page: https://www.whatadaycollective.com/artists Any help would be much appreciated! Thanks :)
  10. Site URL: https://sturgeon-tangerine-zyeb.squarespace.com/ Hi, I already have my CSS set up to display the Summary Block item title and description on rollover, but I'm now looking to add to that functionality. Is there any way to have the actual thumbnail image change on hover? I want to be able to not only display text on rollover, but replace the image as well. Site password is scdp2020
  11. Site URL: https://www.zoedean.design/ Hey, I'm having issue with this layout and moving the hover image down so it doesn't overlap with the header. Does anyone know what CSS I need? Also, is there a way to change the colour of the title when I hover over it? It's orange atm but I'd like it to be the background colour when I hover so it stands out more on the images. Thanks!
  12. Site URL: https://lobster-ray-g42d.squarespace.com/knowledge-news Hi! I would like to change the hover colour of text links and 'Read More' links in my blog section. I cannot seem to change the hover colour in Site Styles, and currently when I hover the text 'disappears' as it becomes the same colour as my background. Currently, I am trying this code!?!? section[data-section-id="60b02fef63cb4154a2416bdf"] a:hover { color: #d85820; } Places you can see this occurring: https://lobster-ray-g42d.squarespace.com/knowledge-news https://lobster-ray-g42d.squarespace.com/knowledge-news/protecting-indigenous-communities-from-covid-19 pw: youcanenter Thank you for your help! Louisa
  13. Trying to create a landing page with where the full-bleed background image changes when hovering over different text. Does anybody know how to achieve this on Squarespace 7.1? Similar to this: https://nicolainiermann.com Thank you!
  14. Site URL: https://echidna-gardenia-fcb4.squarespace.com I'm using the Pazari template and am looking to remove some of the hover links on select images on the main portfolio page. For example, when you hover over one of the project images, the name of the project appears and this is then clickable (takes you through to a detailed page on this project). I need this feature on some of the images, but for others I want to remove both the text and the clickable link so these appear as a flat image only. Does anyone know if this is possible and how you create custom code for this? Assuming this code will need to apply to each individual image which is uploaded and I'm not sure if you can separate them? Any help on this would be great! Examples below showing how the text appears when you hover over the image and site link is: https://echidna-gardenia-fcb4.squarespace.com Thanks!
  15. Site URL: http://www.aarontmeehan.com Hey guys, I am using Custom CSS on my site. Basically what I want is a hover-over effect. So I followed this tutorial: https://youtu.be/unSOxhzbJY8 It worked well. Except the problem I have is formatting the size. In the tutorial she has 20vw (view width). I don't want a stationary size, I want the image to match the code binding box. So if I have 3 instances of these code boxes next to each other, they don't scale on top of each other, but stay proportional. Basically I want my image size to react exactly like if I used an image box on my site and had no hover over code. I cannot for the life of me get that to work. What in this code would you replace to do that? #img-hover { background-image: url('image'); height:19vw; width:19vw; background-size:contain; } #img-hover:hover { background-image: url('image'); }
  16. Site URL: https://www.thefilmhousetv.squarespace.com Hi, I want to add a border around my image blocks like this: Here's how it looks so far: I want to also take out the underline every time I hover my pointer on it. Finally, my mobile view is a mess. I want to fix this as well. Thank you very much!
  17. Site URL: https://www.marcelohm.com/ Hey forum, I've spent the last 4 days changing from wix to squarespace and completely rebuilding my photography portfolio. So far I've been very pleased with Squarespace and did not face any big troubles. However, just as I'm about to finish the hover effect on my landingpage stopped working properly. https://www.marcelohm.com/ The hover effect is supposed to change the full background image upon hovering and as I set up the site everything worked just fine. Yesterday when I got into the builder the site started displaying a small portion of the standard background image at the top of the screen. I've tried every option that I can think of, regarding the header and the portfolio element, but I can't get it back to working properly. Any help in resolving this issue is much appreciated.
  18. (Updated: SS 7.1) Some custom code (CSS) to change color Navigation Link Navigation Hover Link Navigation Active Link >> 92 Templates Navigation Custom Font Notes Add code to Home > Design > Custom CSS The code is based on demo at squarespace.com/templates, so they may not work for some websites or navigation with dropdown If the code doesn't work, try adding !important to after, eg: color: #f1f2f3 !important; If you have any questions/found issues, just comment below or send me a private message. Thanks. Avenue Template /* Nav item color */ .main-nav ul li a { color: #ff0000 !important; } /* Nav item hover color */ .main-nav ul li a:hover { color: violet !important; } /* Nav item active color */ .main-nav ul li.active-link a { color: green !important; } Aviator /* Nav item color */ nav#main-navigation ul li a { color: #ff0000 !important; } /* Nav item hover color */ nav#main-navigation ul li a:hover { color: violet !important; } /* Nav item active color */ nav#main-navigation ul li.active-link a { color: green !important; } Bedford Family: Anya, Bedford, Bryant, Hayden, Bedford /* Nav item color */ #mainNavigation div a { color: #ff0000 !important; } /* Nav item hover color */ #mainNavigation div a:hover { color: violet !important; } /* Nav item active color */ #mainNavigation div.active a { color: green !important; } Brine Family: Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Custom Template, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West, Brine. /* Nav item color */ .Header-nav-item { color: #ff0000 !important; } /* Nav item hover color */ .Header-nav-item:hover { color: violet !important; } /* Nav item active color */ .Header-nav-item--active { color: green !important; } Farro: Farro, Haute Same as Brine Five /* Nav item color */ nav#main-navigation ul li a { color: #ff0000 !important; } /* Nav item hover color */ nav#main-navigation ul li a:hover { color: violet !important; } /* Nav item active color */ nav#main-navigation ul li.active-link a { color: green !important; } Flatiron /* Nav item color */ ul#nav li a { color: #ff0000 !important; } /* Nav item hover color */ ul#nav li a:hover { color: violet !important; } /* Nav item active color */ ul#nav li.active-link a { color: green !important; } Forte /* Nav item color */ #topNav ul li a span { color: #ff0000; } /* Nav item hover color */ #topNav ul li a:hover span { color: violet; } /* Nav item active color */ #topNav ul li.active-link a span { color: green !important; } Ishimoto /* Nav item color */ #topNav #nav li a { color: #ff0000; } /* Nav item hover color */ #topNav #nav li a:hover { color: violet; } /* Nav item active color */ #topNav #nav li.active-link a { color: green !important; } Momentum /* Nav item color */ #topNav ul li a { color: #ff0000; } /* Nav item hover color */ #topNav ul li a:hover { color: violet; } /* Nav item active color */ #topNav ul li.active-link a { color: green; } Montauk: Julia, Kent, Montauk, OM Same as Momentum Native /* Nav item color */ #navBlock ul li a { color: #ff0000 !important; } /* Nav item hover color */ #navBlock ul li a:hover { color: violet !important; } /* Nav item active color */ #navBlock ul li.active-link a { color: green !important; } Pacific: Bryler, Charlotte, Fulton, Horizon, Naomi, Pacific /* Nav item color */ #mainNavigation div a { color: #ff0000 !important; } /* Nav item hover color */ #mainNavigation div a:hover { color: violet !important; } /* Nav item active color */ #mainNavigation div.active a { color: green !important; } Skye: Foundry, Indigo, Ready, Skye, Tudor /* Nav item color */ .nav-blocks-wrapper div a span { color: #ff0000; } /* Nav item hover color */ .nav-blocks-wrapper div a:hover span { color: violet; } /* Nav item active color */ #mainNavigation div.nav-link--active a { color: green !important; } Tremont: Camino, Carson, Henson, Tremont /* Nav item color */ #mainNavigation div a span { color: #ff0000; } /* Nav item hover color */ #mainNavigation div a:hover span { color: violet; } /* Nav item active color */ #mainNavigation div.active a span { color: green; } Wells /* Nav item color */ div#topNav ul li a { color: #ff0000 !important; } /* Nav item hover color */ div#topNav ul li a:hover { color: violet !important; } /* Nav item active color */ div#topNav ul li.active-link a { color: green !important; } Wexley /* Nav item color */ #topNav ul li a { color: #ff0000; } /* Nav item hover color */ #topNav ul li a:hover { color: violet; } /* Nav item active color */ #topNav ul li.active-link a { color: green; } York: Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor, York /* Nav item color */ .site-navigation div a span { color: #ff0000; } /* Nav item hover color */ .site-navigation div a:hover span { color: violet; } /* Nav item active colo */ .site-navigation div.active a span { color: green; } Squarespace 7.1 /* Nav item color */ .header-nav-item a { color: #ff0000 !important; } /* Nav item hover color */ .header-nav-item>a:hover { color: red !important; } .header-nav-folder-item:hover a { color: red !important; } /* Nav item active color */ .header-nav-item--active a { color: green !important; } Created by Tuan Phan. Share to be shared more.
  19. Site URL: https://www.revitlearners.com Hi- I'm using the Paloma template, and I'd like to make the links in my header underlined when user hover over. Same color. Help? Thanks! site password: Amanda123!
  20. Site URL: https://www.blueridgeresearch.com/ourteam-1 Hello, I have a Team page with images in a summary block. I would like to have text (Read More...) appear over the images when hovered over. I think the image would need to gray out a little so the text could be seen. Clicking would take the user to the URL in the image setup (currently pointing to Lightbox but that will change to a URL). Would also need to work in mobile view. Hopefully, simple CSS can accomplish this. The page is here - https://www.blueridgeresearch.com/ourteam-1. I truly appreciate it if one of you can help me. Thank you very much!
  21. Site URL: https://stillebliksem.squarespace.com Hi, i would like to disable to click through in this portfolio section. I do want to keep to hover effect that displays the pictures. When i add a 'no pointer event' ass custom code the click through is disabled but the hover effect is gone. I used this portfolio as a client list. There is no need on this page for a click through as I am building a complete portfolio on a different page. Any help is appreciated!
  22. Site URL: https://www.studiosmpl.com is there a way to have the same hover effect (opacity change only) on the nav links as the text links?
  23. Site URL: https://marigold-mouse-h28x.squarespace.com Hi there, I'm still learning my way around CSS and could really use some help. I'd love to make a section of images on the homepage mirror the hover effect that happens on a portfolio page. Does anyone know how to do this? Template: https://growwell-demo.squarespace.com/programs Site Preview: https://marigold-mouse-h28x.squarespace.com Password: Suits
  24. Hi! My navigation links are red and fade to black on hover. The active link is underlined. However, I can't figure out how to make the underline turn black as well when hovering; it remains red. Anyone know of any CSS that could help with that? Thanks.
  25. Site URL: https://tuna-ladybug-3hgy.squarespace.com/shop Wondering if anyone can help me discover how to reveal the title and price of a product when a user hovers over the product image. Page: https://tuna-ladybug-3hgy.squarespace.com/shop Pass: brineintopedro
  • Create New...