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
    • 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. Hi! I am struggling to figure out how to have an image darken when the mouse hovers over it, rather than lighten to the color of the background. I'm working in the Forte template, into which I Frankensteined some code pieced together from various other forum posts and need some help with how to edit it so that the image darkens on hover(like this: http://demo.squarestud.io/grid-gallery-9). I'm pasting the code in use on the site below. Please help me, this is my first foray into code and I am totally clueless! Code: .sqs-gallery-block-grid .slide .margin-wrapper:hover a.image-
  2. Site URL: https://www.maceyjforonda.com/commissions Hello! In need of some help, since I don't have experience coding: Trying to create a hover function over the individual thumbnails in my grid that shows the image title or caption (like the attached image, but without the shadow). I only need this function on the commissions page and I want to keep the current font as well.
  3. Site URL: https://www.patrickpilato.ca/ Password: 123 How do i edit the hover effect on all social icons that are in the body of pages? I found this effect that i would like to put to use:
  4. Site URL: https://www.patrickpilato.ca/ password: 123 I have used code to create an underline hover in the navigation bar, and for the active link to stay bolded. Is there a way to stop the underline showing up with you hover over this active link?
  5. Site URL: https://www.patrickpilato.ca/ Hi there, I've been struggling with a couple things. 1. I would like to make the navigation hover underlines: A) Thicker lines B) I would like there to be a bigger space between the navigation link and the underline. password: 123 Thank you!
  6. Site URL: https://wij.design Hello! I want to have all my portfolio Items have the same clickable / hoverable 'bounding box' Their block ID is 'portfolio-hover-item-title', and each have 2rem of right-padding, but I would like them all to have the same size 'box' regardless of item title length. How it currently is: | Emphatic Anti-Ad Devices ________________ | | Miol ________________ | How I want it to be: | Emphatic Anti-Ad Devices________________ | | Miol __________________________________ |
  7. Site URL: http://www.mimiceramics.com Hello! I looked all over the forum to see if I could find an answer for this and couldn't find anything, so apologies if I missed it. I know that the navigation action varies by template, some of them you have to click to get the drop down and some you can hover (like the template I use, Brine). However I'm wondering if there's any code to switch that and make it so the visitor has to actually click the icon to get the menu to open. And then I guess making sure there's a way for them to exit as well? Thanks so much!
  8. (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
  9. Is there a way to show the page descriptions for each page in an index as you hover across the index menu options instead of the thumbnail images? I have it set to show on the main page which works beautifully, but I would like subsequent page descriptions (or, alternatively, a text box) to show as you scroll across the index menu options instead of the banner/thumbnail images. I attempted simply creating images of the text I want shown, but since its viewed as an image, the actual; text gets cut off on smaller screen sizes instead of adjusting as text would. I am using the Henson te
  10. Site URL: https://www.dafidesign.co.uk/ I have two images that act as a way to select between two options. They both contain an anchor link to a contact form on the same page (below). Could someone please provide the code to make each image 'levitate' slightly as a hover effect. I found an example of this for grid summary blocks here: https://www.ghostplugins.com/steps/quh49fn7 Is this possible for an image? Thanks - Finn
  11. 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
  12. Site URL: https://pear-sponge-56w4.squarespace.com/recarpet/event Hello, I would like to add an overlay caption when hovering over images in a gallery. I found the code to do this, it worked great but it disabled the lightbox function so the images couldn't be enlarged. Would anyone be able to help take a look at the code to see how to keep the lightbox function working? Thank you appreciate any help! CODE: .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.4); /* overlay color */
  13. Site URL: https://www.arineiditzphotography.com I'm using a hover-background portfolio section as a homepage, listing a number of projects. I want the list stacked on the left but when I select "Left" it doesn't go as far to the left as I would like. I would prefer it to line up with the left edge of the logo in the header. I would also like to tweak the vertical position of the list if possible.
  14. 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
  15. Site URL: https://lynx-copper-kklb.squarespace.com Hi everyone! I am trying to fix this really irritating issue with my gallery block on my homepage. When I hover over it there is a green line that appears on both sides of the image. Does anyone know what could help resolve this? Thank you!
  16. Hi, I am creating a website for a client. The client would like to have their branding color as an overlay every time we hover over the portfolio grid image. I have tried a few codes and none work. Is there a CSS code that would solve this issue? SO for the hover only comes out as white and i cant find a way to change it. @tuanphan
  17. Site URL: https://seal-burgundy-yx98.squarespace.com/ I'm hoping to have a hover effect on the images in the gallery on my landing page for Squarespace 7.1, that allows a second image to fade in. I've been able to find lots of tutorials for this for 7.0, and for image blocks and products on 7.1, but not for galleries. And I haven't been able to figure out how to set up the classes properly for this use. I'd like each image in the gallery on my landing page (currently a simple grid, which is the only simple grid gallery on the website) to show a second image on hover, and then those imag
  18. Site URL: https://stereobild-stream.com/ Hey, Iam trying to build a hover effect to hide a gallery slideshow and show the title of the picture. I have build this for images and it works great but for the slideshow I ran in to some troubles. I manage to hide the slideshow by hover but ram not able to show the title. For the images I hid the image by overlaying the title full-size #collection-6023ddb5fbdbb45eab5a6bde{ /*Bilder - Plakat*/ .design-layout-poster .image-card-wrapper { visibility: visible; opacity: 0; transition-duration: 1s;
  19. I am trying to create a hover box with the title of my pieces on my grid gallery.I have no CSS experience, I would really appreciate the help! My template is: Ishimoto. Here's my site: http://www.studiobanan.com/
  20. Site URL: https://www.americanpacificgroup.com/experience Hi there! I recently started working with a new client who had their site built by another web designer using the Brine template in 7.0. On the site's experience page, my client would like a drop shadow to appear when the image in the gallery block is hovered over. And usually, the CSS that the past designer used seems to work perfectly fine (see first screenshot). However, I've noticed that when I'm using Chrome, these black lines appear around the images (see second screenshot). Any idea why this may be happening and how
  21. Site URL: https://typeaprofessionals.com Hello! For my social media icons, I was able to replace Squarespace's generic link icon with a customized Google icon using the code below (and uploading an image of the Google icon). However, I would like the Google icon to hover on the same color as my other social media icons. Does someone know how to add to my code below to make this work? Thank you in advance! ------ //replace link icon with Google icon// .sqs-svg-icon--list a:nth-of-type(2) { svg { display:none; } background-image: url(https://static1.squarespace.com/
  22. Site URL: https://taptailscocktails.squarespace.com Hi! I am having a problem with my gallery hover with link as it is not responsive (cannot be clicked/redirected to the linked pages) password: taptails I have this code I found in this forum as well: //Gallery Hover// figure.gallery-grid-item { position: relative; } .gallery-caption { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; f
  23. Hi, I am working on Squarespace 7.1 and I am looking to create a gallery page with titles on each image as you hover over them through custom css. (I want to use a masonry gallery as my landing page that clicks through to each project). Alternatively, I would like to know if it's possible to covert a portfolio index page to masonry - the only available option at the moment is to have equally sized squares.
  24. Site URL: https://taptailscocktails.squarespace.com Hi! I am having a problem with my gallery hover with link as it is not responsive (cannot be clicked) password: taptails I have this code I found in this forum as well: //Gallery Hover// figure.gallery-grid-item { position: relative; } .gallery-caption { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size:4em; color:white; } /* title */ .gallery-caption-content { position: absolute; left: 0;
  25. Site URL: https://www.jenuman.com/24hours Hey yall! I'm trying to add some custom CSS to an artwork site that I'm working on but am having trouble using some of the scripts I've seen online. Basically what I'd like to do is to be able to hover over each image in a carousel gallery and have the images/artworks enlarge with a description of the piece of artwork. I'm not even sure if it's possible to do such a thing involving text, as it seems like a tall order; so I could be happy with just a simple lightbox hover feature. I've attached a couple images, one is of the gallery as it lo
  • Create New...