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
    • Resources
  • 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
  • German Circle Members's Topics

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.magdalenanp.com/ When hovering over the logo, the png file pops-up - How do I prevent this?
  2. Site URL: https://gentlewisdom.squarespace.com/ Hello, I added some custom css to have an overlay appear upon hover of my image (attached screenshot). The caption text links to another page on my site. If the user clicks anywhere on this block I want it to link to the page, but right now only the text is linking despite adding a clickthrough URL on the image options window. I'm pretty sure this is because of the css to display a colored overlay over the image upon hover. Is there any workaround to get the whole overlay or image to link? Or is this just an either/or situation. Thanks for any help in advance.
  3. Hi I'm trying to adjust the hover timing for jasper to be slower. I don't know what css to use sadly even after inspecting the page. I want the timings to be slower like: https://www.cynthiahedesign.com/ my current website: https://www.matthewbaltzelle.com/ any help is appreciated!
  4. Site URL: https://www.mishayeung.com hi, I'm trying to make an image darken when the mouse hovers over it, rather than lighten to the color of the background But it doesn't work successfully in Gallery and List of images my code is here: /* Hover Effects - list */ .list-item img { transition: all .5s ease-in-out;} .list-item:hover img { background-color: black; opacity: 0.8; transition: all .5s ease-in-out;} /* Hover Effects - gallery */ .gallery-grid-item-wrapper img { transition: all .5s ease-in-out;} .gallery-grid-item-wrapper:hover img { background-color: black; opacity: 0.8; transition: all .5s ease-in-out;}
  5. 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!
  6. Site URL: https://www.workshopandmachine.com/homepageprojects Hi, On a homescreen I've created images that change when the mouse hovers over them. I created them with custom code blocks. This client does not have the premium features so I am not able to Inject custom code or scripts to the page. The code blocks load, but very slowly and glitchy initially when the browser opens it. This is the code I used: <a href="https://www.workshopandmachine.com/rising-sealevelscompetition"><div id="img-hover2"></div></a> After a while of waiting for the images to load and hovering over them they work fine, but every new user cannot have this problem where the hover over is glitchy. Any solutions/ suggestions? Please help!
  7. Site URL: https://amethyst-tomato-gx6x.squarespace.com/ On hover there's a white overlay that appears on top of the buttons (due to the opacity linear gradient if I'm not mistaken). How do I remove it to keep it pure black on hover?
  8. Site URL: https://scaacquisition2020.com pw:1234 This is making me nuts. I need to remove the image overlay that appears when you hover over the portfolio links on my homepage. There is no setting within the design color editor and I've set all "image overlays" to transparent just to be safe but still can't figure out what the CSS should be to remove this annoying default setting. EDIT: Here is the correct CSS for anyone interested .portfolio-hover-bg-overlay { display: none }
  9. Site URL: https://jaycefox.squarespace.com/ Can anyone suggest a code that will allow these captions to only appear on hovers? The site's url is https://jaycefox.squarespace.com and the password is "fox" Here is the code I am currently using... p.gallery-caption-content { font-size: 22px !important; } figcaption.gallery-caption.gallery-caption-grid-masonry { position: absolute; bottom: 0; background: rgba(0,0,0,0.5); color: white; left: 0; text-align: center; img:hover }
  10. Site URL: https://oboe-oriole-p6l3.squarespace.com/ Hi there, I'm trying to make the heading & caption aligned on the left of the image hover in this gallery. I've attached an image of the current alignment vs my goal of alignment. I'd ideally like to be able to easily change the size, colour, format, padding, typography emphasis etc of the text within the coding too. I've attached images of all the current coding on the website, including the page itself, the images & under Design > Custom CSS. If anyone can assist me with figuring this out, I'd be very grateful! Thanks, Bell. WEBSITE LINK: https://oboe-oriole-p6l3.squarespace.com/ PASSWORD: milkcity
  11. Site URL: https://kazoo-sparrow-xwe9.squarespace.com Hi, So i have 5 projects on my site right now. I want to change the hover effect on the cover of my projects so when you hover over it the image changes to a different image. How do I do that? My site password: fall
  12. Site URL: http://adrienneandaya.com Hi there! I'm in need of help because I can't seem to get the CSS coding right. In the Advertising section of my personal page, I currently have projects as thumbnails where you hover your mouse and the name of the project appears w/ a black overlay on top. However, the current code doesn't allow them to be clickable - when you click it's supposed to take you to the page of the project you clicked on. Can anyone pinpoint where I must've coded it wrong? .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.4); /* overlay color */ height: 100%; max-width: unset; padding: 0; opacity: 0; } .gallery-caption-wrapper { display: flex; align-items: center; /* center vertically */ justify-content: center; /* center horizontally */ } .gallery-caption p{color:white; ; text-align:center; font-size:1.5rem!important; font-family:pragmatica-extended!important} .gallery-caption-content { font-size: 1rem !important; /* caption font size */ color: white; /*caption font color */ } .gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } .gallery-caption-grid-content { transition-delay: 0ms; }
  13. Site URL: https://www.thesoulfulentrepreneur.ca/clients Hello, I know that it is possible to change an image on hover using custom code blocks; however, is it possible to do so for blog cover images? The page I'm interested in doing this for is here. Ideally, I'd love to change each image to an image of the client upon hover. If not, I realize that a workaround would be to set up a new page with custom code where each image is added as a code block and links to the corresponding blog page. However, I thought I'd investigate whether the above approach is possible before doing so. Thanks in advance for your help!
  14. Site URL: https://watermelon-sponge-6pkp.squarespace.com/ Hi, I would like to remove the hover effect on all the buttons on my website but only on mobile layout. Any suggestions? Thanks!
  15. 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/
  16. Site URL: https://celery-prism-5xaj.squarespace.com I am trying to build a 7.1 version of my 7.0 site mainly because I am finding using multiple gifs too heavy and am trying to use coded blocks to run linked videos instead. I am building a portfolio style page with multiple projects, either represented by a still image or by linked video. What I would like is a hover effect that reveals the name of the project in the block when the cursor rolls over. Have done this for the stills using this Video But I would like to achieve the same effect for the code blocks I am using to run video. I am a bit of a newbie at this so could do with some help. Thank you
  17. I'm creating a home page with some linked images including captions below. The CSS below gives the images a hover effect, but nothing happens to the captions. Is it possible to give the cations a similar effect (or change color or something) at the same when the hover effect is activated? #block-40b84df9ad7a77f5ea51 { a:hover img { transform: scale(1.04); opacity: 0.8; transition: .4s } }
  18. Site URL: http://capybera-point-sp57.squarespace.com Password: 1234 Hey guys, I had this hover css code added and it was working perfectly. All of a sudden it stopped. I can't seem to figure out why. When I go into the edit page and hover over it, it slants, but once I hit done and it's back on the normal view, it doesn't slant. Here's all the custom code I have added: header#header.shrink * { color: black !important; } .sqs-svg-icon--list { a:hover { opacity: 1 !important; } a:hover .sqs-use--icon { fill: #C3FF5C !important; } } // Slanted Text Effect // h1:hover { transform: skewX(-15deg); transition:transform .3s ease-in-out; color: #C3FF5C !important; cursor: default; } h1 { transition:transform .3s ease-in-out; } // Spotlight Navigation Style // .header-nav-list:hover > .header-nav-item { opacity: 0.5; } .header-nav-list:hover > .header-nav-item:hover { opacity: 1.0; } // Spotlight Navigation Folder Style // .header-nav-folder-content:hover > .header-nav-folder-item { opacity: 0.5; } .header-nav-folder-content:hover > .header-nav-folder-item:hover { opacity: 1.0; } div#block-ee18e72926134564be2b a { color: black; transition: background-color .5s; transition: color .5s; transition: transform 0.3s !important; } div#block-ee18e72926134564be2b a:hover { color: #4063b3; background-color: #C3FF5C; opacity: 1 !important; transform: scale(1.1) !important; } div#block-448c899fbef46c44308f a { color: black; transition: background-color .5s; transition: color .5s; transition: transform 0.3s !important; } div#block-448c899fbef46c44308f a:hover { color: #4063B3; background-color: #C3FF5C; opacity: 1 !important; transform: scale(1.1) !important; } Any help would be greatly appreciated! May-14-2022 20-00-08.mp4
  19. Hello! SOS! I have an Image gallery carousel set up in a blog post and I am trying to figure out how to show the caption on hover as well add a teal overlay and if possible also make the image bigger when hovered over. This is what I have: This is what I would like it to look like:
  20. 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-slide-anchor { opacity: .4; -webkit-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; -moz-transition: opacity .3s ease-in-out; -o-transition: opacity .3s ease-in-out; -ms-transition: opacity .3s ease-in-out; } .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { display: block; position: absolute; top: 0px; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; padding: 0em; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out; margin-bottom: 0px !important; pointer-events: none; } .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { color: #000000; opacity: 0; text-transform: uppercase; font-size: 16px; line-height: 125%; letter-spacing: 3px; margin-bottom: 240px; } .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { color: #000000; opacity:1; text-transform: uppercase; vertical-align: middle; font-size: 16px; line-height: 125%; letter-spacing: 3px; margin-bottom: 240px; } @media only screen and (max-width: 400px) { .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { color: transparent; opacity: 0; } } header#header { padding-bottom: 20px; }
  21. Am I missing something, did hover states go away for Navigation in the 7.1 release? This is a sad miss given that it helps with usability.
  22. Site URL: https://www.gerileung.com/ Hi! I'm customizing the caption hover on images but I'd like for the title of the caption to be visible only and then on the hover have the rest of the caption to appear. I thought I could target the h4 class directly and set visibility to visible but that didn't work. Is there another way to do this? See the attachments for what is on the site now and what I'd like to do. Thanks!
  23. Site URL: https://bugle-springtail-4na6.squarespace.com/ Hello, How can I make the title on the index gallery to show up only on hover? https://bugle-springtail-4na6.squarespace.com/ password: 123 thank you!!
  24. Site URL: https://trout-blue-7hts.squarespace.com/ Hey there, I'm currently trying customize a portfolio page that's using the hover:fixed layout. I'm trying to achieve two things: I want to left-align the text. I want to manually set the position for each image that appears while hovering. Right now they're all appearing in the center, but I'd love to be able to place them anywhere on the page (see the two screenshots as example), each of them at an individual position. The website: https://trout-blue-7hts.squarespace.com/ Password: baumann1234 Thanks in advance! Nico
  25. Site URL: https://onion-snail-wjhl.squarespace.com/ Hi everyone! I feel like this should be a question that gets asked a lot, but I just can't seem to find any answers online - or they just aren't working for me. I am attempting to change images within a gallery block, in 7.1, to change to another image on hover. I'd like each image to have their own unique image reveal as the mouse hovers over the image. Site example with gallery block: https://onion-snail-wjhl.squarespace.com/artist-portfolio For the test, we would like to try to do the following: aaron Huey" could hover to: this image (link) "ami vitale" could hover to this image (link) "ronan donovan" could hover to this image (link) Thanks everyone! you're all so super supportive!
  • Create New...