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

Search the Community

Showing results for tags 'hover'.

  • 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
    • Selling & Scheduling Your Services
    • 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
  • German Circle Members's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Site URL: https://oakpointpartners.com/ I want to recreate a similar hover reveal to this website: https://www.domo.com/solution/overview I like the smooth transitioning and how the title never leaves. It just slides to the top. I also like hover hovering over the blocks adds a drop shadow. Any ideas to get started with creating this? https://oakpointpartners.com/oak-point-remnant-asset-case-studies I'm currently playing around and have currently done the following: On hover the first image transitions to a second image I have added a drop shadow I still would like help on figuring out how to mimic the upwards scrolling action of the example provided below. I would like the title to scroll up and the bottom to reveal new text
  2. Site URL: https://lightsandtracks.squarespace.com/ I'm trying to update the color of my hamburger menu on hover over similar to the behavior seen on the site at: https://lightsandtracks.squarespace.com/. I'm not skilled enough to extract the hover over CSS from this site. Maybe someone can help me with that? I can't reveal our site's URL but I have figured out the CSS to update the color of the hamburger menu, either (1) or (2) below: (1) .burger-inner .top-bun, .burger-inner .patty, .burger-inner .bottom-bun { background-color: white!important; } (2) .burger-inner>div { background-color: white !important; } Then I tried the following to update the color to red on hover over, but it only updates the color of each of the horizontal lines of the hamburger menu but not all three at once: .burger-inner>div:hover { background-color: red !important; } If someone can suggest what CSS I can use to update the color all 3 sections of the hamburger menu on hover over I'd love to know.
  3. Site URL: https://lightsandtracks.squarespace.com/ Hi there, Site password: lightsandtracks I am finalising a client site and need assistance with two items: 1. I have set up the menu to be the burger menu at all sizes. However, I can only get the hover state to work on one line of the bun, not both – I've tried everything! Does anyone know how to get the hover state to work on the full menu? 2. I have added an arrow to show on the menu items on hover - I'd love to add a transition to this hover so the arrow appearing is smoother. Does anyone know how to do this? Thanks so much! Ash
  4. 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!
  5. Site URL: https://www.kelseyeaton.com/ Hi! I'm trying to customize my cursor to be a circle that inverts the content inside it. Just like this website: https://www.satupelkonen.com/ (except the whole images doesn't need to be inverted on hover, just what's inside the circle). I found this JSFiddle project that does something similar: https://jsfiddle.net/p1ja0n8r/ But I'm not a developer, and am hoping that someone can explain how to do this like I'm five years old. If it's even possible in SquareSpace? THANK YOUUUU! ScreenRecording.mov
  6. Hi there, I am looking to create the same effect as displayed on this website: https://www.visuals-internationals.com/?skip-intro Desired effect: - Still image of video when mouse is not hovering over it - Video preview when hovering + revealing the title - video preview stopping when mouse is not hovering anymore - Click through to actual video page Thank you!
  7. Site URL: https://www.bengoodman.com Hi! I currently have one image in the body area of my site on the main landing page. Each navigation link has a strikethrough on hover. However, I would like to ALSO have the image (or GIF) in the main body change, depending on which link I hover over. Each portfolio link would display a relevant image on hover. Any help would be greatly appreciated! Thank you.
  8. Site URL: http://andrewmorrisphotography.co.uk Hi there, is it possible to change the colour of the logo when the curser hovers over it?
  9. Site URL: https://ukulele-pug-le4k.squarespace.com/verein hello, on my page I want to introduce the members of our club. To do so I added a carousel-item-list. I want to add a hover-effect where single images switch by hovering over it. I have problems to implement that. How can I add a hover effect where single images change on hover? Thanks a lot! https://ukulele-pug-le4k.squarespace.com/verein PW: unserverein123 section[data-section-id="616802f396f85b30804b1e0c"]
  10. Site URL: https://www.thesoulfulentrepreneur.ca/clients Hello, I know that it is possible to change an image on hover using custom code blocks; however, is it possible to do so for blog cover images? The page I'm interested in doing this for is here. Ideally, I'd love to change each image to an image of the client upon hover. If not, I realize that a workaround would be to set up a new page with custom code where each image is added as a code block and links to the corresponding blog page. However, I thought I'd investigate whether the above approach is possible before doing so. Thanks in advance for your help!
  11. I am using slide show gallery in 7.0. On a computer the hover box appears when the mouse is on the image, which is fine. However, on iPad the box is always there. I would like to remove the hover box altogether when the site is viewed on an iPad. How can I do that? Thanks
  12. Site URL: http://www.businessfintech.com Hi there - I have two disclaimers on a client's site (* and ** plus some fine print). Is it possible to create text that would pop up when hovered, such as the attached screenshot example? To clarify, this would also need to be visible somehow on mobile.
  13. Site URL: http://www.andreaaronica.com Hello everyone, what I'm trying to do is a animated underline hover effect under the pages on my header (squarespace 7.1). The password for my website is: almostready I managed to use this code in my CSS: nav a::after { border-bottom: 1.5px solid #000000; content: ''; display: block; position: relative; top: 0.5px; /* Change the vertical position of the underline */ transition: width 0.35s; width: 0%; } nav a:hover::after, nav .current-menu-item a::after { width: 100%; } And it works just fine even though it takes the page titles slightly up. Not a big deal (But if I can fix also that it would be great). The real problem is with the mobile version. The underline is too wide and it doesn't underline just the text but also the social buttons and the button. The code I used for mobile is: @media (max-width: 979px){ nav a::after { top: 0px; /* Change the vertical position of the underline */ } } but it does absolutely nothing, actually it messes up the desktop version. I really tried every kind of css code I could find but I'm totally stuck. Any help would be appreciated. Thank you in advance.
  14. Hi! I'm trying to change the text of my links when you hover over them; for example: Link reads "hohm" and when the cursor moves over it, it changes to "home" Link reads "uh-bout" and when the cursor moves over it, it changes to "about" I've seen custom CSS for changing link color but not actual text.
  15. Site URL: http://dragonfly-drum-g8n7.squarespace.com hello! I am trying to get the title of the blog posts to appear on hover when I include a summary block on a landing page. I found a tutorial and copied the code however the title doesnt appear only on hover, it is fixed there. this is my code: @media screen and (min-width:800px) {#block-yui_3_17_2_1_1633664426986_16015 { .summary-item { position: relative; img { transition: all .5s ease!important; } .summary-content { position: absolute; color: #fff!important; top: 50%; left: 50%; opacity: 0; pointer-events: none; transition: all .5s ease; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); } .summary-title, .summary-metadata--primary, .summary-metadata--secondary, .summary-excerpt { color: #FEFCE3!important; font-family: Libre Baskerville; font-size: 13px } } .summary-item:hover { img { -webkit-filter: brightness(70%); filter: brightness(70%); } .summary-content { opacity: 1; } } }} I have also attached a screenshot. This is my first time posting for help so I hope I am doing the right thing! I have a password on my website but not sure if i should paste that on here or not! thank you!
  16. 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
  17. Site URL: http://www.gastingerwalker.com/contact I inherited an already built site and I needed to update the contact info. The email and phone numbers for each person are images. Before I updated with new info, they were gray until you hovered over them and they turned blue. Now the ones I have updated are blue all the time. * the actual image is blue (white background blue text) so looks like the code makes it gray until hover. would love some direction on how to fix this. Thanks!
  18. Site URL: https://burgundy-watermelon-ld9d.squarespace.com Hi, I'm relatively new to Squarespace and even newer to the use of custom CSS but I really would like to know if I am able to add a hover design to the gallery on my main page and still have the links working. What I want is to have a gallery with a main image and title that then links to a project page. I've figured out how to add the hover and customise the colour/text but now the links won't work to the project pages (they're not https links, just page links). I've tried to add in code in the image description area to add clickable links but I can't seem to get it to work and it seems this could be quite a laborious task. I've included the code below that I used to make the hover style work (the code my not be in use on my site by the time someone looks as it as I'm doing a lot of work to it at the moment). What I would like is so the whole image is a link rather than just the text so that someone can click anywhere on each image in the gallery and go to the relevant project page. This is code that I've found online so not my own. The first part allowed me to customise the gallery captions which used to be below the image but I've since decided I want them to be on the hover and the second longer part is for the image hovering. Also the password to the site is: Jasmine Any help would be really appreciated. Thanks! // Gallery Caption Text // .gallery-section .gallery-caption p { text-align: center; font-size: 18px; font-weight: 500; color: #ffffff; text-transform: normal; line-height: 1.2em; font-family: inherit; } .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(255,255,255,0.2); /* overlay color */ height: 100%; max-width: unset; padding: 0; opacity: 0; } .gallery-caption-wrapper { display: flex; align-items: center; /* center vertically */ justify-content: center; /* center horizontally */ } .gallery-caption-content { font-size: 1rem !important; /* caption font size */ color: white; /*caption font color */ } .gallery-grid-item { position: relative; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } .gallery-caption-grid-simple { transition-delay: 0ms; }
  19. I'm trying to duplicate the text hover effect from my portfolio page (pictured, top left image is hover) in a gallery section on another page using CSS. I'm a CSS novice. I've managed to get the opacity hover, however I'm stuck on how to get the text description to display on hover. .gallery-grid-item-wrapper:hover img { opacity: 0.8; transition: all ease-in-out 0.2s; } .gallery-item-description:hover img { opacity: 1; } Thanks, appreciate any help.
  20. Site URL: https://www.joeblackham.com/work Hey - I have 9 images on a page and I'm trying to get a hover effect which fills the entire image, but it's only covering the top 75% - any help would be appreciated as I'm not a CSS whizz! This is the code I am using at the moment: .image-caption-wrapper { opacity: 0; text-align: center !important; top: 0 !important; width:100%; height:100; border: 2px solid white; padding: 1px; margin: 0px; position: center !important; pointer-events: none !important; } &:hover, &:focus { opacity: 1; } .image-caption { left: 50%; position: absolute; top: 50%; width: 100%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .image-caption p { font-size: 18px !important; font-weight: semibold !important; color: #ffffff !important; text-transform: uppercase; line-height: 120% !important; letter-spacing: 2px !important; opacity: 1 !important; } .sqs-block.sqs-block-editable:not(.sqs-block-editing) .sqs-dd-invalid-handle { cursor: default; pointer-events: all !important; } .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper { background: #ffffff; opacity: .9; }
  21. Site URL: https://www.vintagetimbers.net Hello, I did some coding for my image cards on the homepage to rotate on hover using the code: /*roatating image on hover*/ .design-layout-poster img, .design-layout-poster .image-overlay{ transition: 1s } .design-layout-poster:hover img,.design-layout-poster:hover .image-overlay{ transform: rotateY(180deg); transition: 1s } .image-card-wrapper{ transform:rotateY(180deg)!important; opacity:0; transition: 1s; } .design-layout-poster:hover .image-card-wrapper { opacity:1!important; transform:rotateY(0deg)!important; background: #3E4450; transition: 1s; } But for some reason on Chrome it works perfectly and on Safari it glitches out. Does anyone have an answer/suggestions to fix this problem? The site is www.vintagetimbers.net and the password is vintagetimbers Thanks so much!
  22. Hi! I used a code for hover zoom on my gallery masonry. It works, but one of the other images (not in the gallery masonry) also gets a hover effect and I want to disable it. Thanks in advance! The ID for the image that I would want to disable: #block-yui_3_17_2_1_1632753956520_10855 The code I used for zoom hover in the gallery masonry: /* Homepage gallery grid image zoom on hover */ body.homepage figure:hover img { transform: scale(1.1); transition: all 0.5s; } body.homepage figure img { transition: all 0.5s; }
  23. I'm using the theme Jasper and on my project thumbnail blocks (on homepage) I'd like still images that when you hover over a video plays. Is this possible? Thank you Kieran
  24. Site URL: https://www.51eggs.com Hello, I have a series of images with Caption Overlay on Hover on my home page, which I've managed to change the size of the overlay (previously covered 1/4 the lower portion of the image on hover) to cover the full width of the image, using the .image-caption selector. I would like to lighten up the built-in overlay a bit, but am having trouble targeting it. Adjusting the opacity of .image-caption works, but it makes the captions within the overlay semi-transparent as well. Any suggestions? Thank you!
  25. Site URL: https://www.andrealepori.com Hey guys, Hope you're all doing well, I am having some trouble using a CSS custom code in order to make nicer captions on my new website. The idea would be to have my credits for each album showing up on hover while being linkable to an external url (spotify) Anyone could help me with this? I am currently using this bit of CSS, but can't make the links working?being clickable again. Hope it makes some sense figure.gallery-masonry-item { position: relative; } .gallery-caption { position: static; } .gallery-caption-content { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; z-index: 999; padding: 7%; transition: opacity ease 200ms !important; opacity: 0 !important; pointer-events: none; } .gallery-masonry-item:hover .gallery-caption-content { opacity: 1 !important; } figure.gallery-masonry-item .gallery-masonry-item-wrapper:before { background-color: rgba(0,0,0,0.7); content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; opacity: 0; transition: all 0.5s; } figure.gallery-masonry-item:hover .gallery-masonry-item-wrapper:before { opacity: 0.6; transition: all 0.5s; } figcaption { padding: 0 !important; } mba_website.mov
  • Create New...