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


Forums

  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location


Badges

Found 302 results

  1. Hi, I've put a Slideshow Gallery at the top of an Index Page in the Brine template. It has three images that transition. By default when the mouse hovers over an image the slideshow pauses and you cannot prevent this automatic pausing without a code injection. I would like the slideshow to continue on mouseover however I still need the website visitor to be able to press a gallery dot/arrow indicator or press a 'Call to Action' link in the image content body text. How can this be achieved? The code below prevents the index slideshow pausing on mouseover but it also switches off all mouse pointer events... /* Index Gallery Slideshow - prevent pause on hover */ .tweak-index-gallery-layout-slideshow .Index-gallery-wrapper { pointer-events: none!important; } .tweak-index-gallery-layout-slideshow .Index-gallery-wrapper .Index-gallery-control { pointer-events: auto; }
  2. Site URL: https://pineapple-sapphire-khkb.squarespace.com/ I'm having a rollover issue. I found some CSS to go from a black icon to one with color on hover, and it works perfectly within Squarespace. But when I view it in a separate browser window or different browser, the original icons aren't the same size as the hover versions. The attached images are what it's supposed to look like and what it actually looks like outside of the editor. Here is the CSS I'm using: .icon-swap-linkedin img:nth-child(1) { position:absolute; transition: .5s; } .icon-swap-linkedin img:nth-child(1):hover { opacity:0; } .icon-swap-twitter img:nth-child(1) { position:absolute; transition: .5s; } .icon-swap-twitter img:nth-child(1):hover { opacity:0; } .icon-swap-instagram img:nth-child(1) { position:absolute; transition: .5s; } .icon-swap-instagram img:nth-child(1):hover { opacity:0; } password is guava
  3. Site URL: https://www.madebyrach.net/portfolio I am trying to get my projects in my portfolio to underline or fade (words get slightly transparent) when hovered over. I am using the Quincy template. I've put my website in for your reference; if it takes you to the Home page for some reason, just navigate to my Portfolio and when you hover over my various projects, it doesn't give any user feedback - it just stays white. Is there any way I can inject code or use CSS to customize this? Thank you! -Rachel
  4. 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); }
  5. Hello! I'm looking to change the color of navigation links when I hover over them in Squarespace 7.1. There doesn't seem to be an option to do that yet. Does anyone know the CSS for this? Thanks!
  6. 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?
  7. (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.
  8. 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!
  9. 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
  10. 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
  11. 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
  12. 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!
  13. 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
  14. 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.
  15. 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!
  16. 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!
  17. 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!
  18. 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. πŸ™‚
  19. 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
  20. 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.
  21. 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!
  22. 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
  23. 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
  24. 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 :)
  25. 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.
Γ—
Γ—
  • Create New...