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

Search the Community

Showing results for tags 'hover'.

More search options

  • 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




Found 301 results

  1. Site URL: http://emilykopf.com Hi there! I'm currently working with the Wexley template, and I'm trying to figure out how to further customize the hover effect when rolling over images on a gallery page. My site is: http://emilykopf.com I've already used the Site Styles to customize the background of the hover to a dark indigo, and I've customized the font style for the title. That being said, it seems like I'll need to employ some custom CSS to get the caption to show up, and customize that font (would prefer the caption to be smaller, and a serif font). Ideally, I'd love to get a transition effect on the hover as well. Whether that's the image enlarging in the frame, or the caption and title moving together, any dynamic movement would be better. I looked at Devon Stank's image hovers for reference, and considered purchasing, but these don't work for images within gallery indices. My favorite of his hover effects is: https://www.devonstank.com/squarespace-image-captions hover overlay 1. Any idea how to get this to work with a gallery index?
  2. (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.
  3. Site URL: https://corn-apricot-zn88.squarespace.com/staff-blog-test I added a scale on hover effect to my personnel summary block. It worked absolutely fine until I looked at it today. I have not changed any CSS. Now the scaled up image bleeds outside of the box. It should not be visible between the images. Is there something I can add. (site PW is BA47) I tried an override with "overflow: hidden" but it does nothing. This is the ENTIRE code for the hover effect and title overlays that is in the CSS. It is used on the personnel page and portfolio page. @sbg-6_title-font-color: #e86335; @sbg-6_title-case: uppercase; @sbg-6_title-letter-spacing: 0.1em; @sbg-6_title-font-family: 'arial'!important; @sbg-6_title-font-size: 20px; @sbg-6_title-font-weight: normal; @sbg-6_title-paddinng-vertical: 90%; @sbg-6_link-font-family: 'arial'!important; @sbg-6_link-font-size: 18px; @sbg-6_link-case: varies; @sbg-6_link-font-weight: normal; @sbg-6_link-font-color: #000000; @sbg-6_link-letter-spacing: 0.1em; @sbg-6_excerpt-padding-vertical: 0; @sbg-6_excerpt-padding-horizontal: 10%; @sbg-6_excerpt-font-color: #000 !important; @sbg-6_excerpt-font-family: 'arial'!important; @sbg-6_excerpt-font-size: 14px!important; @sbg-6_excerpt-font-weight: normal; @sbg-6_excerpt-line-height: 1em; @sbg-6_excerpt-case: none; @sbg-6_clickthrough-option: auto; @sbg-6-metadata-bg: rgb(234, 226, 234); @sbg-6_metadata-padding-vertical: 10px; @sbg-6_metadata-padding-horizontal: 30px; @sbg-6-metadata-font-color: #fff; @sbg-6-metadata-case: uppercase; @sbg-6-metadata-letter-spacing: 0.1em; @sbg-6-metadata-font-weight: bold; @sbg-6_hover-time-overlay: 1s; @sbg-6_hover-time-content: 0.7s; @sbg-6_hover-time-image: 0.5s; @sbg-6_hover-scale: 1.2; @sbg-6_hover-overlay-bg: rgba(255, 255, 255, 0.7); @sbg-6_mobile-excerpt-padding-vertical: 5%; @sbg-6_mobile-excerpt-padding-horizontal: 5%; @sbg-6_mobile-overlay-bg: rgba(234, 226, 234, 0.5); @sbg-6_mobile-title-font-size: 20px; @sbg-6_mobile-excerpt-display: block; /* This displays the Title */ .sqs-gallery-design-autogrid { //Grid layout .summary-thumbnail-outer-container a { margin: 0 !important; } //Grid overlay .summary-content .summary-title { color: @sbg-6_title-font-color; font-family: @sbg-6_title-font-family; font-size: @sbg-6_title-font-size; font-weight: @sbg-6_title-font-weight; letter-spacing: @sbg-6_title-letter-spacing; margin-bottom: 0; text-transform: @sbg-6_title-case; word-break: break-word; } .summary-title::after { content: ""; display: block; } .summary-content .summary-excerpt p, .product-price, .summary-metadata--primary { color: @sbg-6_excerpt-font-color; font-family: @sbg-6_excerpt-font-family; font-size: @sbg-6_excerpt-font-size; font-weight: @sbg-6_excerpt-font-weight; line-height: @sbg-6_excerpt-line-height; text-transform: @sbg-6_excerpt-case; } .summary-read-more-link { color: @sbg-6_link-font-color; font-family: @sbg-6_link-font-family; font-weight: @sbg-6_link-font-weight; letter-spacing: @sbg-6_link-letter-spacing; text-transform: @sbg-6_link-case; } .sqs-gallery-meta-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: @sbg-6_excerpt-padding-vertical @sbg-6_excerpt-padding-horizontal; position: absolute; top: 0; pointer-events: @sbg-6_clickthrough-option; -webkit-transition: background @sbg-6_hover-time-overlay; -o-transition: background @sbg-6_hover-time-overlay; transition: background @sbg-6_hover-time-overlay; width: 100%; } .summary-metadata--secondary { background: @sbg-6-metadata-bg; padding: @sbg-6_metadata-padding-vertical @sbg-6_metadata-padding-horizontal; position: absolute; bottom: 0; left: 50%; text-align: center; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); z-index: 999; } .summary-metadata--secondary a { color: @sbg-6-metadata-font-color; font-family: 'montserrat'; font-size: 13px; font-weight: @sbg-6-metadata-font-weight; letter-spacing: @sbg-6-metadata-letter-spacing; text-transform: @sbg-6-metadata-case; } .summary-title, .summary-metadata--primary, .summary-read-more-link, .summary-excerpt, .product-price { opacity: 0; -webkit-transition: @sbg-6_hover-time-content linear; -o-transition: @sbg-6_hover-time-content linear; transition: @sbg-6_hover-time-content linear; } .summary-metadata-item::after { display: none; } .summary-thumbnail { -webkit-transition: -webkit-transform @sbg-6_hover-time-image; transition: -webkit-transform @sbg-6_hover-time-image; -o-transition: transform @sbg-6_hover-time-image; transition: transform @sbg-6_hover-time-image; transition: transform @sbg-6_hover-time-image, -webkit-transform @sbg-6_hover-time-image; } //Grid hover mode .summary-item:hover { .summary-title, .summary-metadata--primary, .summary-read-more-link, .summary-excerpt, .product-price { opacity: 1; } .summary-thumbnail { -webkit-transform: scale(@sbg-6_hover-scale); -ms-transform: scale(@sbg-6_hover-scale); transform: scale(@sbg-6_hover-scale); }
  4. Site URL: http://www.celineisogai.com Hi! celineisogai.com password: wowza I've been searching around for a solution for a hover effect on my gallery (simple:grid) but the CSS I've tried didn't work. I was hoping to have the images in greyscale when static and when hovered over become the regular colour with the caption in the middle. When I tried one of the other codes it changed the padding between the grid pictures and then pictures were touching. My second question to this would be can I have it so that in mobile they don't have the greyscale or hover effect? I just want the picture. Last question would be what is the code to have my pictures in 1 column on mobile? When I click on the "work" page there's 2 columns and inside the projects it's also 2 columns. Thank you!
  5. Site URL: http://tsacstudios.squarespace.com Hi guys! Trying to remove the hover over my products on the site on this page: https://tsacstudios.squarespace.com/tsac-store I’ve tried a few pieces of CSS and they don’t seem to change it! any help would be much appreciated thanks! site PW: brineintopedro
  6. Site URL: https://okra-swordfish-w2kf.squarespace.com/ I'm trying to enable image descriptions to appear atop the center of each image upon hover. While I've managed to create a nice ease in/ out effect with making the image slightly more white (essentially so the text can stand out), I can't seem to get description text to appear on each image with the hover. I've gone through a number of threads, but for some reason every version of code I've found isn't working for me. To note, I need to maintain clickthrough abilities, as each image links to its own respective project page I'm working with a gallery block, simple grid on Squarespace 7.1. Here's the code I have so far: //IMAGE BACKGROUND ON HOVER figure.gallery-grid-item .gallery-grid-item-wrapper:before { background-color: white; content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; opacity: 0; transition: all 0.5s; } figure.gallery-grid-item:hover .gallery-grid-item-wrapper:before { opacity: 35%; transition: all 0.5s; } Do I add something to this specific segment of code, or is there a different block of code I should add for the descriptions to also appear on the hover? I'm new to CSS and would be so grateful for some insight! With gratitude! Alex
  7. Site URL: https://www.harmoneywealthaz.com/services website: https://www.harmoneywealthaz.com/ourstory#anchor-harmoneydifference https://www.harmoneywealthaz.com/services I am hoping to add an element or some sort of css animation upon hover on the dropdown/accordion menu to show the user that the accordion is clickable. Has this been done before on squarespace? My mouse doesn't changer upon hover so the text doesn't appear to be clickable. @tuanphan
  8. I'm trying to apply an image hover distortion effect to the background image uploaded to the top section of my site, using this as a guide. In my version, the two images are exactly the same so the hover effect would be the main visual attraction. No luck so far and am wondering if anyone has tried something like this using Squarespace 7.1, or has suggestions on how to improve the following? Is this even doable? I have this in the code injection footer: <script src="https://tympanus.net/Development/DistortionHoverEffect/js/imagesloaded.pkgd.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> <script src="https://tympanus.net/Development/DistortionHoverEffect/js/hover.js"></script> <script> imagesLoaded( document.querySelectorAll('img'), () => { document.body.classList.remove('loading'); }); Array.from(document.querySelectorAll('.section-background')).forEach((el) => { const imgs = Array.from(el.querySelectorAll('img')); new hoverEffect({ parent: el, intensity: el.dataset.intensity || undefined, speedIn: el.dataset.speedin || undefined, speedOut: el.dataset.speedout || undefined, easing: el.dataset.easing || undefined, hover: el.dataset.hover || undefined, image1: imgs[0].getAttribute('data-src'), image2: imgs[0].getAttribute('data-src'), displacementImage: el.dataset.displacement }); }); </script>
  9. Hi there! I am looking to have the alt. text descriptions of each of my images pop up in a separate box when the mouse hovers over each image. For some reason I am not given the same Gallery Drop-Down menu where I can select text box overlay, inset etc. Anyone have any idea what I can do from here to figure this out? When I click to edit the block, I am given the options of Gallery and Colors. In the Gallery type I can choose which gallery type or change to a slideshow type, but there is no option to change the formatting of the text description boxes. Please Help!
  10. 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
  11. I am using the Momentum template for a portfolio/cv related site. No issues past two days. But all of a sudden, my hover decoration in the navigation bar is positioned midway through the text. I would like to reposition the navigation bar hover decoration or remove it completely. Thank you.
  12. Site URL: https://www.startupvillage.nl/ Hello, on my site I'm having some issues making my header logo change to a different image when the logo is hovered over. https://www.startupvillage.nl/ I have tried following tutorials from here and here with, pasting code into the Custom CSS, with no results. I think perhaps the main confusion is that in my Custom CSS there is no reference to .header-title-logo If someone could help me figure 1. which code to insert, and 2. where to insert it on the Custom CSS, that would be greatly appreciated!
  13. Site URL: https://matteprojects.com/ Does anyone know how to change a full-bleed background image when hovering over different text links. I'm trying to achieve something like the first page section of this site: https://matteprojects.com/ I have found hover on image solves, but not for multiple text links (each showing a different background image) Thanks!
  14. Hello SS Community, I am looking for a way to change the colour of social icons on hover in the navigation bar. I am using the template Tremont (7.0) Thank you!
  15. Site URL: https://blueberry-marigold-34nn.squarespace.com Hi, I'm trying to achieve the very same effect found in the Hawley homepage template (https://hawley-demo.squarespace.com/) on a normal page, but so far none of what I've been looking for works. I want to display a full bleed image once I hover on a set of specific text links. This option is currently only available on the portfolio collection, and I have absolutely no clue how to replicate the interaction on a normal page. Looking forward to a solution. πŸ™‚
  16. Site URL: https://kumquat-raccoon-c9e5.squarespace.com/professional I'm using Squarespace 7.1 with the portfolio hover background option. When hovering over a link in the portfolio, I'd like the other links to disappear, similar to https://jordangilroy.com/. Here's the website: https://kumquat-raccoon-c9e5.squarespace.com/professional Password: test
  17. 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.
  18. Site URL: https://www.soulstoriesproject.com/client-work I'm trying to add a custom button hover effect on the button within an image block. I used this code but it created an odd hover effect that spanned the width of the block (see attached) .image-button:hover { background-color: #dca757 !important } I'd like these buttons to function like the one on the homepage: https://www.soulstoriesproject.com Any insight as to what I'm doing wrong is greatly appreciated!
  19. Site URL: https://carnation-cardioid-yc95.squarespace.com Hello everyone, I set up a hover effect on my images, which reduces opacity once hovered. However, the change appears quite abrupt, I would like it to be more gradual/smoother. Does anyone know a way to do it with a code? pw: mount$% Many thanks, Federica
  20. Site URL: https://suhama-demo.squarespace.com/?nochrome=false Hello, I am trying to create a site that has the layout of the template Suhama, particularly the block of text on the homepage, with links on several of the words in the text that change the background image as you hover over them, just like the template Hawley. I want to create a portfolio site that features hyperlinks within my bio that link directly to portfolio work. For example, if my bio were: Cameron is a photographer and painter in Portland I would link the word "photographer" to a page with my photographs. As someone's mouse hovered over the word "photographer" it would change the page's background, similarly to how the template Hawley does this. Is this possible? https://suhama-demo.squarespace.com/?nochrome=false https://hawley-demo.squarespace.com/?nochrome=false
  21. Hi, so I'm working on a website and there is no option for making animation to underline the elements whenever the cursor move. It will be like the word "Marketing" in the file I attached. Any help would be great. Thank you in advance :)
  22. Site URL: https://manatee-raccoon-w3wx.squarespace.com/config/pages Hi folks, Im trying to achieve the following; 1) my gallery to display images that dim and display text upon hovering over them 2) clicking on gallery images to lightbox which displays additional text (im trying to avoid having to create additional pages, for displays that are merely additional text). I managed to achieve Item 1, a gallery where the images dim and display text upon hovering over them. However, I am unable to get them to be selectable for lightboxing. Any help is greatly appreciated. I've done a bit of a search, but apologies if this has been addressed already. Cheers, Callum.
  23. Site URL: https://caseyhowarddesigns.com I'm trying to get a logo to lay on top of an image slideshow on my client's homepage. Template is Hayden. I know how to add the logo to the custom css files, but not sure what html to add and whether it should go in the custom css section or a code block on the homepage.... help? Screenshots below of roughly what I'm trying to accomplish!
  24. Site URL: https://www.nickdavid.co.uk/overviewtest2 Hi, This is the site page I am working on https://www.nickdavid.co.uk/overviewtest2 the current design has it going gray when hovering over images. I want to make this hover overlay colored. How can I do this? Any help is appreciated.
  25. Site URL: https://falodu-demo.squarespace.com/work Hi, I'm quite new to Squarespace and I have a question regarding the hover state on the images of a portfolio page in Squarespace 7.1 . I'm currently working with this template: https://falodu-demo.squarespace.com/work and I was wondering if the hover state on the portfolio page (in this case work) can be a solid colour instead of the current 'faded' effect. I have looked everywhere on the design section but it seems it might have to be edited in the custom CSS.
  • Create New...