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

Search the Community

Showing results for tags 'hover effect'.

  • 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

Found 23 results

  1. Site URL: https://sphere-mushroom-twzl.squarespace.com/credits Hey I'm trying to add text for the different album covers on my credits page. I have the gallery in reel mode and it looks really nice. What would put it over the top is if I could put the hover effect over each album cover and add a couple details in that hover. Would css be able to help make that possible? Or should I try an alternate way? (would like to keep the general look tho) Thanks in advance for your help!
  2. Site URL: https://www.eddiefieg.com Hi! I'm trying to figure out if there's a simple CSS code I can insert so any image (with a link) can enlarge/pop off the page a little bit on hover. For example, on my homepage, I'd love to be able to see my project images pop up in size as the user hovers over them: www.eddiefieg.com Thanks!
  3. Site URL: https://www.eddiefieg.com Hi! I'd like to simply remove the hover effect on my social icons and my button (in my site's footer). I've tried some CSS solutions and they're not doing the trick. Little help?! Thanks! Here's my site: eddiefieg.com
  4. Site URL: https://parrot-halibut-yhb8.squarespace.com/shop Hello! I'm trying to remove the hover effect from the product images on my shop page but I can't seem to do so with the generic settings. When you hover over the product image the second product image appears if there is more than one image uploaded for the product. Is there a way to remove it? Thank you in advance! Sample.mov
  5. Hello, Whenever I hover over one image on the product gallery, another image appears. I understand it gives an overview but I prefer not to have it. I had set a thumbnail image but it didn't help. Here is my site, https://caterpillar-antelope-zbjy.squarespace.com/destination password: ptphoto Please help me remove the hover effect. I want but one image to appear as a hero shot. Thank you!
  6. Site URL: https://www.jeulianne.com/portfolio Hello everyone, I am a beginner at coding. In my website, I have multiple short clips that automatically play and loop; they basically act like gifs. I achieved this by using code blocks. There is also a link inserted in each block for viewers to redirect to the full video. This is an example of the code I have for one of my code blocks: <a href="link here" target="_blank"> <video class="video" width="100%" height="100%" autoplay loop playsinline> <source src="s/video.mp4" type="video/mp4"> <source src
  7. Hello, I'm trying to do a hover image swap on the background image. I see a lot of resources for swapping images within code blocks but not for background images. I have my working code here, but so far have not been working: [data-section-id="5dadd9923707f45fc260b448"] .section-background { visibility: hidden; opacity: 0 !important; } .section-background:hover { visibility: visible; opacity: 1 !important; } Any help will be very appreciated! Thanks!
  8. Site URL: https://www.loxd.io/ Hello! I need help on styling code so when I would hover a logo, a background image would reveal itself. I have a webpage set up here: https://www.loxd.io/ Thanks for the help!
  9. Site URL: https://www.loxd.io/portfolio-2 Hello! I'm looking to achieve a hover effect where once you over a logo image, a background image would reveal itself. I have the desired effect here with the big logotype in the center: https://www.loxd.io/portfolio-2 however it was only achieve by using the portfolio hover styling layout and changing the text link to a logo image via css on 7.1. I think it can be better achieved by css without the use of the portfolio hover styling layout by targeting the background image and an image file but I'm unsure how to style the code along with
  10. Site URL: http://yummytheshow.com On any pages with a slideshow gallery - there's a hover effect that lightens the image when the mouse hovers over it. Does anyone know the CSS to remove this altogether?
  11. Site URL: http://www.samuelhunter.com I have some code that is currently applying itself to any image that has text with it (regardless of layout). I'd like it to only apply to specific images: those that are links to further pages. Another option is to target images that are poster-layout, as only poster-layout images are currently links on my site. Here's what I've got so far: .sqs-block-image-figure:hover .image-card-wrapper { filter: opacity(0.0); transition: 1.0s;} .sqs-block-image-figure:hover a img { filter: brightness(1.0); transition: 1.0s; cursor: pointer;} .sqs-
  12. Site URL: https://antelope-octagon-t69s.squarespace.com/ Hey there! 🙂 Im trying to apply this hover effect onto my Shop Product images - Screen-recording attached. The CSS hover effect is working on my Roots BIO images, but not working on my Product images. Homepage - https://antelope-octagon-t69s.squarespace.com/ - not working Our Roots - https://antelope-octagon-t69s.squarespace.com/our-roots working. Any help would be much appreciated. a img.thumb-image { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0);
  13. Hi, I need some help with a hover effect for video. I'd like to achieve the hover animation effect like on youtube or this site: https://www.visuals-internationals.com/ Ideally I'd like the thumbnail to be a still image, as you hover over, it turns in to a gif, and reverts back to still image when the cursor is moved. I'd like to use this in a gallery as well as a standalone video. Any help is appreciated. Thanks.
  14. Site URL: https://giraffe-daffodil-te3n.squarespace.com/portfolio Hi all, I would like to find a way on how to add and make text appear when the mouse hovers a code block. I've been trying to figure out how to apply a title/text hover effect over my (video) code blocks and image blocks that I created for my website. So far, I have applied a contrast/brightness hover effect, but I would like text to appear as well. I understand there is already a method to do it for image blocks, but is there a way to do it for code blocks? Thanks, Lily
  15. Site URL: https://tarantula-calliope-fl4m.squarespace.com/ Hi there – hoping someone can help me have all buttons on my site have an svg icon to that changes on hover. I've been able to get the arrow in, but it seems to disappear after I leave the css panel. here's what is should look like: site: https://tarantula-calliope-fl4m.squarespace.com/ Pass: squarespace /* buttons */ .sqs-block-button-element { text-align: left!important; background-color:#fff!important; border: 4px solid #000!important; color: #000!important; width: 100%!important; max-width: 5
  16. Hello, do anybody know how I can change a size of hover caption on image to cover whole image? I used these codes: .image-caption-wrapper { opacity: 0; text-align: center !important; top: 0 !important; position: relative; pointer-events: none !important; background: #ffffff !important; } .image-caption { left: 50%; position: absolute; top: 50%; width:90%; transform: translate(-50%,-50%); } .image-caption p { font-size: 12px; color: #000000 !important; line-height: 120% !important; letter-spacing: 1px !importan
  17. Grid: Masonry - what is the css to change images to greyscale and then on hover to change to color?
  18. Site URL: https://www.cityofhidalgonews.net I am trying to customize the Header main menu. To add a hover effect on the sub menu....I've tried tech support and they said its not possible. My website - www.cityofhidalgonews.net. I am assuming I need to customize via custom CSS. See attached sample. Right now everything else works fine, but on desktop and mobile, it is really hard to know where you are clicking since the hover effect is not working on the folder menu.... #tuanphan
  19. Site URL: https://koala-point-zbsp.squarespace.com/ In the "What's eating you about your site?" section, I have added a List section with 5 items. My intent is to show image with title underneath inside a square field/background color and on hover, have the smaller descriptive text with button animate/fade over them centered. Please see attached screenshot. Right now you see all of them at same time which is too busy and uneven. Any help would be much appreciated! Thank you.
  20. Hi everybody, Does anyone know how I can get a gallery hover effect for gallery images that are links in Squarespace 7.1? Almost so the photo fades a little, similar to this website when you hover over the images: http://marylennox.de/ The page on my website I'd like to apply this to is: https://denim-khaki-tp4d.squarespace.com/gallery-test-2 Many thanks, Lauren
  21. Hello! I am trying to figure out code for the following two actions. I want to apply each of these actions to one page only, not the entire website. Any help is greatly appreciated! 1) Image gets lighter/less opaque when you roll over or hover. Button stays darker/more opaque when you roll over (scroll down to the the 'about,' 'portfolio, 'contact,' and 'press' images on this page: https://eastonevents.com/) 2) Image gets darker/more opaque when you roll over an image and also a button appears when you hover (see here: https://eastonevents.com/portfolio Images get darker and a
  22. Site URL: https://octagon-garlic-ejcr.squarespace.com/ Link : https://octagon-garlic-ejcr.squarespace.com/ Password : sonatine Hello friends, I'm almost done with my brand new website, but there are still a few things I would love to correct. 1/ So for each section, all the thumbnails (an actuall image gallery) are linked to my video projects. Problem is, people need to actually go to the video page to see the actual title. Is there a way I can make a hover effect on each thumnail pic so that when someone place the cursor on it, the title appears ? 2/ There's a sl
  23. Site URL: https://www.patsimpsonart.com Need some CSS to adjust font and font size on the hover effect for my main gallery 7.0 flatiron Site password: T3mppass!
  • Create New...