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


Expert ID

Found 346 results

  1. Site URL: https://mango-harmonica-5r95.squarespace.com/aboutme Hi there, My code seems to work on codepen for the hover effect (changes to the blue color). But when I input it on my website, I get everything except the hover/color change effect to work. Here's my code: https://codepen.io/nickleb/pen/yLOrORo Thanks! Edit: I also just noticed when I put in the code for the hover effect h1 a {} it now moves up the bouncing triangle into 'View my Work.' It looks fine on codepen but on my squarespace site it's breaking?
  2. Site URL: http://jordanakozy.com Hello! I'm trying to stylize the hover on hyperlinks in different blocks (text, image blocks etc.) They all have different native styles. I used: h3 a:hover,{color: #309166} for headers and it worked. Does anyone know code for normal text and for image block text?
  3. Site URL: https://meetkt.com I am trying to mimic the hover affect here on the image icon boxes to the home page on my site. I want to add it to the portfolio pieces listed currently to add more details on the project. Thank you for helping!
  4. Site URL: https://heartpainter.com/anam-cara Working still with Wells template...is there a way to get the product hover to include the brief description? Usually painting buyers expect to see the size of the painting right away. Of course they can see it once they click on the painting. It might be nice to be able to show it on hover.
  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://bulldog-green-chzy.squarespace.com/ Site URL https://bulldog-green-chzy.squarespace.com/ Password: Dpc35! I'm trying to add image descriptions, that appear in the centre of a "slightly" greyed out hover. I've been able to create the hover, however the image description appears right at the top of the hover (and therefore the image). I also want to be able to click on the image, to open the Vimeo video and play etc. I set it up by starting with a Blank page, added a gallery block - 'grid' - and "used existing Gallery" that I had put all the videos in (stored in my "Unlinked" area). (using Squarespace 7.0). I've attached a screen grab of what the image looks like when you hover .. This is the code I've been using: .sqs-gallery.sqs-gallery-design-grid .slide .margin-wrapper .image-slide-title { position: absolute; bottom: 0; width: 100%; height: 0%; color: white; background-color: black; opacity: 0; transition: all .25s hover; } .sqs-gallery.sqs-gallery-design-grid .slide .margin-wrapper:hover .image-slide-title { height: 100%; opacity: .65; }
  7. Site URL: https://www.davai.squarespace.com Hi all I am having some issues with a HTML code, that is supposed to change a image to another when hovered above. To access the page, you might have to use the password "davai" I have tried multiple solutions, but finally found one that actually worked (on one of the entities...) You can find it in the second section under "Kompetencer". As you can see, it works on "adgangsudstyr" when you hover the mouse above the image, but it does not work on the wind turbine over "Vindmølleservice" or "Overfladebehandling" The code i have gone for is: <center> <img src="URL to still image” onmouseover="this.src=’GIF image to replace still image’" onmouseout="this.src=’URL to still image’"> </center> When the URL is added, it looks like this (this is the one added to the page) <center> <img src="https://images.squarespace-cdn.com/content/5f6873716e3d0466b9953dd9/1600854461689-UHACZYWZUG5CQPHJJLWV/icon-wind-turbine-service.png?content-type=image%2Fpng” onmouseover="this.src=’https://images.squarespace-cdn.com/content/5f6873716e3d0466b9953dd9/1600868753305-7LONEER0YHGEWO5QEBPT/Wind-turbine.gif?content-type=image%2Fgif’" onmouseout="this.src=’https://images.squarespace-cdn.com/content/5f6873716e3d0466b9953dd9/1600854461689-UHACZYWZUG5CQPHJJLWV/icon-wind-turbine-service.png?content-type=image%2Fpng’"> </center> You should be able to access the images through the links. Feel free to come up with alternate solutions, although i have tried out a few so far...
  8. Site URL: https://mouse-trout-epjy.squarespace.com/members Hello, I am trying to add a blue overlay on hover to the images in a portfolio grid. On Members page, you can see I've added a grid of images with a working blue overlay on hover using the following code: .layout-caption-overlay-hover .image-caption-wrapper { background-color:#66C8F0!important; opacity: 0.6!important; min-height:100%; top:0!important; } .layout-caption-overlay-hover .image-caption-wrapper, .layout-caption-overlay-hover .image-caption-wrapper { color: transparent; } Below the contact form you will find another grid with a handful of projects - this is the portfolio grid. The client would like to be able to add the individual members pages as portfolio projects - so I am trying to code the portfolio grid images to have overlay on hover - am I right in saying this isn't possible because they can't inherit the caption overlay? site password: spong123
  9. I've seen a lot of custom code to change the color of hover on navigation bar links, but I can't figure out how to add a hover color/effect to text that has been hyperlinked.
  10. 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!
  11. Site URL: https://poodle-turtle-zkzb.squarespace.com/portfolio-tiled Hello! I'm on 7.1 working with Portfolios, specifically the main portfolio page that shows all projects. I'm looking to display all project names on mobile, when a user goes to my main portfolio page and they see all my projects as thumbnail tiles. Portfolio settings: Format tab Grid: Overlay Show Text: After Hover https://poodle-turtle-zkzb.squarespace.com/portfolio-tiled On desktop, project names display as expected upon hover. On mobile, project names do not display at all. --- I'm looking for an option, or code, that will display the project name over the project image tile on mobile. Preferably at bottom with some opacity. (I know that I can work around this by choosing Show Text: Before Hover.) Support told me that this option isn't available other than to add custom code. thanks to anyone who can help!
  12. 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 }
  13. Site URL: https://dolphin-gerbil-zh8s.squarespace.com/ Hi there, I'm trying to style my navigation so that each nav item has a different hover colour. I have managed to do this but I would like the active setting to be in the chosen colour with coloured underline. A the moment the hovers work but the active elements seem to be conflicting with main css. The code i'm using is: /* our services hover */ .header-nav-item a[href="/our-services"]:hover { color: #59CBE8 !important; } /* our services active */ .header-nav-item--active [href="/our-services"] { color: #59CBE8 !important; } /* our services folder hover */ .header-nav-item:hover>a, .header-nav-folder-item:hover a { color: #59CBE8 !important; } /* our services folder active color */ .header-nav-item--active>a, .header-nav-folder-item--active>a, .header-menu-nav-item--active>a .header-menu-nav-item--active { color: #59CBE8 !important; } /* our impact hover */ .header-nav-item a[href="/our-impact"]:hover { color: #F9423A !important; } /* our impact active */ .header-nav-item--active [href="/about"] { color: #F9423A !important; } /* our support hover */ .header-nav-item a[href="/our-support"]:hover { color: #FFD100 !important; } /* our support active */ .header-nav-item--active [href="/our-support"] { color: #FFD100 !important; } /* about us hover */ .header-nav-item a[href="/about-us"]:hover { color: #FF29C7 !important; } /* about us active */ .header-nav-item--active [href="/about-us"] { color: #FF29C7 !important; } /* resources hover */ .header-nav-item a[href="/resources"]:hover { color: #97D700 !important; } /* resources active */ .header-nav-item--active [href="/resources"] { color: #97D700 !important; } Any help would be much appreciated!
  14. Site URL: http://www.ryanballphotography.com Hi there, I have setup my homepage with three images as a grid:overlay. I have set this to show text after I hover, this is perfect for desktop browsers and I don't want to change this. However for mobile devices, the text doesn't show (as the hover function does not work on touch devices). I therefore want to change this to "show text before hover" for mobile browsers, without affecting the desktop browser. So how do I keep "show text after hover" on the desktop browser and "show text before hover" on mobile devices. I'm using squarespace 7.1. web address is www.ryanballphotography.com. Thanks Ryan
  15. Site URL: http://www.jennydeluxe.com I'm looking to change a few of the buttons on my page when hovered over. For example, this button (image below) looks like this before hovered over. Upon hovering, the background color changes so it looks like this. But how do I get the text "work" to disappear and in turn be replaced with "Coming soon"?
  16. Hi, Anyone knows how to make a color on a hover effect on a image? I know how to make grayscale and other effects, but in this case i have a black/white image and a green colorgrade that i want on on the image when hover. Best Regards Jacob
  17. (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.
  18. Site URL: https://cricket-bellflower-3xhg.squarespace.com Is it possible to add a hover-state color change to my menu on the main navigation? at the moment the menu items don't 'highlight' to show when you've rolled a mouse or otherwise navigated between menu and sub-menu options. I am using Euclid on 7.1 Thanks.
  19. Site URL: http://www.millerbest.com/ Hey guys, I currently have a website made with Avenue template. The home page is an index page, which features a variety of different images that click through to other pages. I currently have the 'show caption on hover' setting, but I'd love to get an animated gif playing/looping when hovering/mouse over. Is this possible? I've searched through the forum and found a few leads, but I'm not sure I understand where to embed the custom CSS and where to upload the gif etc. Thanks!
  20. Site URL: https://hallpr.com/steven#s By default photo captions in a gallery are visible only on hover. How can I make them persistent and make them visible at all times? Thank you in advance.
  21. Site URL: https://puma-orb-9lss.squarespace.com/projects .white .portfolio-grid-overlay:hover .portfolio-title { animation: fadeIn 1s ease !important; } @keyframes fadeIn { 0% { opacity: 0; -webkit-transform: translate3d(0,30px,0); -moz-transform: translate3d(0,30px,0); -ms-transform: translate3d(0,30px,0); -o-transform: translate3d(0,30px,0); transform: translate3d(0,30px,0); } 25% { opacity: 0; -webkit-transform: translate3d(0,30px,0); -moz-transform: translate3d(0,30px,0); -ms-transform: translate3d(0,30px,0); -o-transform: translate3d(0,30px,0); transform: translate3d(0,30px,0); } 100% { opacity: 1; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } } Hi, I'm trying to get a hover effect on hover on the project page. I got close to what I wanted but the animation only works when I move the cursor on and off the page. And doesn't work when I move the cursor between projects. Also, how can I get the title to fade out the same way it fades in?
  22. Site URL: https://www.thebespokedesignco.com Hello, I cannot figure out the coding to change buttons on the newsletters and forms! Driving me crazy. Anyone know how to target form and newsletter buttons? Here is what I used for both body buttons and the header to fade from one to color to another when hovering: // BUTTON COLOR FADE // .sqs-block-button-element--medium.sqs-block-button-element { background-color:#ebab9e; color:#ffffff; -webkit-transition: 3s; transition: 3s; } .sqs-block-button-element--medium.sqs-block-button-element:hover { background-color:#9D4331; color:#ffffff; -webkit-transition: 2s; transition: 2s; } // HEADER HOVER COLOR FADE // .header-actions-action .btn:hover { background-color:#ebab9e; color:#ffffff; -webkit-transition: 3s; transition: 3s; } .header-actions-action .btn:hover { background-color:#9D4331; color:#ffffff; -webkit-transition: 2s; transition: 2s; }
  23. Site URL: http://www.alphamalevisuals.com/music-videos http://www.alphamalevisuals.com/music-videos On my website, I currently use an image block as a thumbnail for my music videos. They click the thumbnail and it takes them to the page to watch the music video. Upon hovering (or rollover) over the image block, I'd like for it to swap to play a .GIF when hovering over it. Or maybe play a small video clip if possible? I've looked on the forums and seen other people ask similar questions. Some said something about custom CSS but when I try to copy and paste that code, it does not work for me and I'm not sure what I'm doing wrong. Can anyone help?
  24. Site URL: https://www.melissatakai.com/ When you hover over the project link, the image that pops up isn't vertically centered to the link. It used to be normal but then this glitch happened a few weeks ago. And in case someone points this out, I do have this code on my website: .portfolio-hover { position: absolute; width: 100%; } But removing it doesn't fix the problem. Any other solutions to this? Thanks so much.
  25. Site URL: https://nicholasasmita.com Hello Im new in squarespace. And as I read, you cannot change template in squarespace 7.1. And I already pick a wrong design template. I'm curious how can I put the hover effect (the image is changing follow the text hovering) in my site I want to make it as portfolio thumbnail in the homepage. I already search the section in edit theme, but can't find it. Thank you. https://hawley-demo.squarespace.com/
×
×
  • Create New...