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 Topics
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Topics
  • 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

Found 226 results

  1. Site URL: https://potato-sphere-g3k8.squarespace.com/config/design/custom-css Hi! Does anyone know how to add a "slide up" effect to text when you hover over text on boxes? @tuanphan Website: https://naonow.com/about password: naonow
  2. Site URL: https://potato-sphere-g3k8.squarespace.com/config/?frameUrl=/about Hi! How do I set all text to be the exact size of these images on all devices? And for the black background to fill the whole picture without a scroll. I shortened the text for the top images but for some reason they aren't expanding to the exact size of the images. As well, is there a way to add a slide up effect for the text? Thanks!! @tuanphan
  3. Site URL: https://fortheloversphoto.squarespace.com Hi! I've added CSS to my Image Blocks with the Caption Overlay (hover) effect to have a transparent overlay on the images. You can see the current style here: https://fortheloversphoto.squarespace.com I just realized that the hyperlinked photo is now covered by the overlay effect, so there's not clickable area on the overlay. Is there a way I can add a link to the overlay itself, with just CSS? Specifically whatever the link is for the image? I want to make sure my users will be able to click through to the linked galleries.
  4. (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: violet !important; } /* Nav item active color */ .header-nav-item--active a { color: green !important; } Created by Tuan Phan. Share to be shared more.
  5. Site URL: https://alligator-buffalo-slhk.squarespace.com/projects-1 Hi, Does anyone know if i can create a hover effect on a background image using CSS ? (as opposed to an image block). I want to create a white overlay on all backgrounds on this page, https://alligator-buffalo-slhk.squarespace.com/projects-1 ... and only reveal full colour of image on hover. (We are using full bleed backgrounds, rather than image blocks, to achieve a transparency on the header) -Andrew
  6. Site URL: https://www.erobertson.design/ The homepage of my portfolio site features index images of each project. When you hover over each image, it reveals the project title. I would like to add a 1px outline stroke to these images (67% black), but only in the hover state. I am using the Jasper (York) template. Can anyone help?
  7. I'm looking to make all the links on my page magenta, but ONLY when being hovered over. I have them designed per section so I dont want them to be uniformly one color, but i want them to all have the same color when being hovered over. Every custom css ive found makes all of the links that color even when not being hovered over. my color is #C71585 C71585
  8. Site URL: https://destoursrecords.squarespace.com Hi everybody, First of all I hope you all are save and good with this covid-19 virus raging around the world. I'm far from beeing a coder/website builder but i'm trying with the experience and resources I have to build a website for music label. And I would like to adapt the standard Brine / WAV template but i'm running in some problems that I tried to fix with some CSS code... but it maked it more worse then better. So I'm asking your help guys. SITE : https://destoursrecords.squarespace.com PASS : destours2020 So I would like to change with some CSS coding : 1. Standard in every text box on every page, that a hyperlink is in the same color as the text // hsl(180, 35%, 14%) // and when hovering over the hyperlink it turns in yellow // hsl(45, 100%, 54%) // but WITHOUT underlining (like in the header menu above) 2. Standard in the footer box on every page, that a hyperlink is in the color // hsl(46, 0%, 35%) // and when hovering over the hyperlink it urns in yellow // hsl(45, 100%, 54%) // but WITHOUT underlining (like in the header menu above) 3. In the footer I have a subscribe box... It's making the footer to big. Is it possible to "compress" it more horizontally? That the space between every line is smaller? I tried some CSS coding from the help section and here on the forum but it more harm then good to my site, Thank for you time reading my problem! Hope you guys can help me! All the best, Maurice
  9. Site URL: https://www.hayloft.media/ I removed the line under the menu options on my page, and am trying to add code to highlight on hover, but I can only highlight the home page, not the contact page there are only two pages at the moment, i would like to darken to grey from white. https://www.hayloft.media/ Im using 7.1, can anyone help? thanks!
  10. 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 }
  11. Hey there, So I'm new to Squarespace and love the platform itself and all it offers. I currently am trying to create a 90's inspired site and was wondering if this was possible at all to do here. Similar to the Glass Animals' website design (https://opensource.glassanimals.com/), I was wondering if there was a way to upload icons to work as buttons so that when you click it, it could be transferred to another page. Or if there was a way to import the icons on the homepage as images, and then make a transparent button to put over it, so that when you were to click on an image it does somewhat of a similar effect. I've looked into other platforms where this seems more achievable, but overall would love to use Squarespace for all of its features. If someone could give any further input, it'd be greatly appreciated!
  12. Hi all. I am making a website for a photographer. Each images needs to have a caption link etc that shows up in lightbox mode.... but I cannot figure a way to make the caption be black text on white b/g. Does anyone know? The white text on black background looks crappy on this site. Thx!!!
  13. I'm using a 7.1 template—Hawley. Someone else actually had the same question that was answered but I found a new problem. I want the "works" menu on the page (not the nav) to be black and then white on hover. I'm using this code and it works BUT the words are actually white when you first get to the page and then change to black after you hover over them for the first time, after which they stay black and then change white on hover.
  14. Site URL: https://austinhomies.com/ I'm trying to enable a hover state on my logo to change from a static image to a gif. Any suggestions on how to do this? Thanks!
  15. Hey everyone, I want to achieve the action seen here in the header image section: https://www.equinox.com/groupfitness?icmp=topnav-classes I want my other thinks to fade on hover, and the background image to change for each link- using CSS. Attached a photo of the section of my site, same basic principles. Big titles that are linked over a background image. Anyone have some code that can accomplish this, or is this too complex for simple CSS? Thanks in advance!
  16. Site URL: https://andrea.co Hi there, I have a question. How do I change the hover color of my search icon? I've tried with this, but it doesn't work .Header-search-form a:hover { fill: #0a97a9 !important; stroke: #0a97a9 !important; color: #0a97a9 !important; } Thanks Andrea
  17. Trying to darken the opacity when I hover over images on my portfolio site. Currently the opacity is too light and my title text doesn’t mesh well with my images. (See attached screenshot - Drew League example). Possible to do so? Any help is much appreciated!
  18. Site URL: https://www.wouterleduc.com/shop Hi guys, I've started working on my webshop. Template Wells, this is the link: https://www.wouterleduc.com/shop I don't want any hover/overlay when the cursor is on the image/product. I can't find a code/solution to fix this. Does someone know a solution? Thanks in advance! Wouter
  19. Site URL: https://www.sleepycatrec.com/shop-admin I'd like to remove the quick view button all together, but keep the action of clicking opening the quick view box. Ideally, I could have a banner behind Product Details and completely hide Quick View Button so there is still a hover effect. If I could get hover to show the second photo AND a product details banner hover that'd be even better! Thanks
  20. Site URL: https://www.seapearls.com/lead-weight Site URL: https://www.seapearls.com/lead-weight Does anyone know how to change the font on the Products page grid to have a rollover? I just need the text under the thumbnails to change color on the hover state. Thanks! Sample page: https://www.seapearls.com/lead-weight (text under images to change color on hover)
  21. portfolio 7.1 site mobile view on portfolio page hover overlay text does not appear whatsoever - I really need this text title to display on touch screens mobiles upon scrolling or selecting -how may i fix this? please take a peek at the portfolio page on any mobile view www.nadinenorman.com/artwork sincere thks to anybody who may be of help - nadine
  22. Site URL: http://francisleclerc.com Hello! I would like to change the hover effect on the homepage images for my website which is using the Jasper template. I would like for the images to change to a single color when hovering over. Each images would have a different color. If anyone could help it would be greatly appreciated! Thank you!
  23. Hi, I have a hyperlinked image block where I'd like for the below to happen upon hover: - Text to appear over the image - White opacity over image I've managed to get this to work using the below CSS code however it seems to have messed up the image clickthrough function. I believe the problem is specifically with the white opacity over image which seems to be disabling clickthrough function. Help! Here's the code I'm using... p, h1, h2, h3 { -webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; hyphens: manual !important; } .design-layout-poster .image-card-wrapper { visibility: hidden; opacity: zero; } .design-layout-poster:hover .image-card-wrapper { visibility: visible; opacity: 1; } .image-block .image-linked:before { content: "";width: 100%;height: 100%;position: absolute;z-index: 1;top: 0;left: 0; opacity: .6;background:; } .image-block .image-linked:hover:before {background: white;opacity: .3;transition: all .2s ease-in-out; }
  24. Site URL: https://potato-sphere-g3k8.squarespace.com/about Hi! Does anyone know how to hover over an image and it will sort of light up with color and then text below it can appear? Website: naonow.com password naonow
  25. 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
×
×
  • Create New...