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

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 126 results

  1. I have placed alternate images within my product descriptions, and on the product/shop page itself, this works great, having the images swap on hover. However, I'd also like to place selected products on the homepage directly (using a product block) and I would like the same effect of the image switching upon hover. Is there a way to do this with css? There would be 3-5 images on the same page (index page) that I'd like to do this with. I can't give you the url at this point, as we've not yet gone live. Help?
  2. Hi fellow Sqaurespacers! I'm creating a Image Gallery for a client of mine, and I have run into a bit of a pickle. I am wanting to change images when hovering over text, like exactly like on this website: https://www.ocun.com/product/category/professional If you have a look at the Thor harness one, you can see how it changes the image and text color when hovering over "4Q", "2Q" and "0Q". Now, how do I do this in Squarespace? I have been at this problem for the last 2 hours probably and I'm beyond stuck. I have tried some javascript, but then the question comes in where do I put the Javascript, in the code block, on the page heading or the whole website heading? Anyways, I hope someone please can help, cause if I would be able to fix this on the website then I would be beyond grateful and happy about it. Cheers
  3. Does anyone know how to create an image hover effect where upon hover, there is a solid background with text? Example: https://www.designhill.com I don't need the icons or anything, just would like a color block with text upon hover. Is this possible with Squarespace css? Anyone have the code for it by chance?
  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. Hi Squarespace! I would like have my thumbnail images change to another image during a hover on my homepage. I'm using Avenue template now and I know this would require custom CSS. You can see my page here: https://www.johnpattersonportfolio.com/. I've attached the original thumbnail vs. the hover state change as attachments. Please let me know if you need more information. Thanks! Dustin
  6. Hello all, I need some help! I am currently using the Ishimoto template because I want my Collection of Images/horizontal scroll Gallery to stretch the entire width of the screen. However, with this template, captions are either ON or OFF - there is no option for CAPTION ON HOVER. There is this hover option on other templates, but their horizontal scroll galleries do not stretch the entire width of the screen. Does anyone know how I can achieve what I am looking for? It appears that people have posted HTML codes for this issue in past Squarespace forums, but sadly Squarespace has removed them (hmph!). Thanks!
  7. 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
  8. Hey guys, I have a pretty specific type of image zoom I am looking for for a recent photo project I started. I am looking for something like the "Image magnify with visible hint" from here - https://www.magictoolbox.com/magiczoomplus/examples/ but it seems that these effects are only for product gallery images. How could I get an effect like that on a standard image in a page, or on a gallery? here is the page I want it on. https://www.daniellemaster.com/tables
  9. How do you get images to hover when your mouse is above them? I've tried various css tricks but haven't been able to make it work.
  10. Hello. Im trying to find a way of having a colour overlay appear on the hover of an image within a gallery. I dont want this effect across every single image just certain ones within a gallery. Please see the site below for reference - as you hover over a project the colour pink overlays. https://megalodon-rose-khl5.squarespace.com/ password: Testingpassword Reference - https://www.contrastcreative.co.uk/
  11. Hi there, My website is a portfolio website for my photography. You can see it here: www.mattstronge.com. I've used the Wells template and I would like the name of the person in the photograph to appear over the image when the mouse hovers over it. Much like on this website here: www.emilyshur.com. Is it possible to do this? Any help would be much appreciated. Thanks.
  12. Is it possible to have a hover state for a logo in the header? My logo says the word "apple", and I want when the mouse hovers over it to swap out for an icon of an apple. Additionally would it be possible to do this for multiple elements in a single logo? i.e. if there was 3 words and hovering over each word would change its state? At the moment I'm just using an animated gif which is fine, just not as clean as I'd like. Thanks!!
  13. Screen Capture2020-01-18 15_22_56.mov Hello I need some help with the CSS. Please see the attached video. Here you can see that when you hover over each image, the image falls back very fast. This css code works for squarespace 7.1 (masonry gallery image grow on hover) The zoom scaling needs a tweak or two. I need help in the css to make the image hover more smoothly when hovering over each image. /* masonry-gallery-image-grow-on-hover sqs.7.1 */ .gallery-masonry-wrapper :hover img { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.3s ; transition-duration: 0.3s ; -webkit-transition-property: transform; transition-property: transform; } .gallery-masonry-wrapper :hover img, .gallery-masonry-wrapper:active img { -webkit-transform: scale(1.1) ; transform: scale(1.5) ; } // end
  14. It looks like the 7.1 templates don't have an option for menu items in the header to fade when you hover over them. Looking for some custom CSS to make this happen.
  15. Hi, I want to change my hover underline colour on a specific page to black, is there someone who can help me out? I want to change the colour on my About page to black My website: etrenoir.net I'm currently using this code for my hover underline: header nav a:hover:after{ transform: scaleX(1); } header nav a:after { display:block; content: ''; border-bottom: solid 1.5px #FFFFFF; transform: scaleX(0); transition: transform 250ms ease-in-out; z-index: 999; transform-origin :100% 50%; } }
  16. 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 from grayscale to color when hovering over as opposed to the image to solid color when hovering. This is what I currently have... https://round-silver-m49j.squarespace.com/work If anyone could help it would be greatly appreciated! Thank you!
  17. Hey everyone, I was trying to use my customize cursor for my website. And I wish it change to a different one when I put my cursor on the hover navigations and artwork hovers. Right now, it is a red outlined circle, and I wish it changes to a red filled circle when I put my cursor to the hovers. Does anyone how to change it? Or code that I can put it in? Thank you!
  18. 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; }
  19. Hello, Does anyone know how to change the colour when hovering over the links on my portfolio page? Thanks! Coral
  20. Hello, I've got a page of poster image blocks with text overlaid, and want the text to only appear when you hover over the image. This is the site: https://platinum-orange-8f4p.squarespace.com/config/pages. Password to view: web1234 (still in beta mode) I want it to look a bit like the 'productions' page here. http://clearstory.co.uk/ Or here: http://www.springfilms.tv/work/ Any suggestions for code would be much appreciated Thanks, Anna
  21. I want to know how to incorporate a zoom and pan/move function when you hover over an an image. Like this example: http://herner.co.uk/works/2579/
  22. Hello, I've been searching for some answers all day and come close but nothing has worked so far. I'd like to entirely remove the hover effect that happens when I mouse over the thumbnail images on the Home page of my site which is set up as an Index in the Flatiron template. The url to my site is harrisonjohnson.work. Any help is much appreciated!
  23. I am trying to create a hover box with the title of my pieces on my grid gallery.I have no CSS experience, I would really appreciate the help! My template is: Ishimoto. Here's my site: http://www.studiobanan.com/
  24. I'm trying to create a hover in my gallery grid. I'd like each image in the grid to show a different image upon hovering. I have code in the css now to change the color but I'd rather it show a picture instead. Is it possible to do this? I'm using the brine template. This is the page I'm working on: https://www.stephanieausfresser.com/peakweather
  25. Hello, I'm using squarespace 7.1 and have a page of poster image blocks with titles overlaid (screen shot attached). I want to create an effect so the title only appears when you hover over the image (a bit like this: http://www.springfilms.tv/work/) Any tips on how I can achieve this? Thanks a lot, Anna
×
×
  • Create New...