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. Site URL: https://bear-echidna-k68b.squarespace.com/ I am trying to change the header links color when hovering over a particular link. Thank you very much.
  2. Hello, Does anyone know how to change the colour when hovering over the links on my portfolio page? Thanks! Coral
  3. My question pertains to customizing hyperlinks on pages upon hover. Specifically, my linked text is desiged to transition from blue to red in a gradient format when hovered. It works for some pages, however on other pages the text is completely white and not visible (although you can still click the link). It also tends to not work with different design color backgrounds. Here is my code. My main question is: how do I get this design format to apply to all link text EXCEPT the text in the header (have a separate design for that). Is there something i am missing with the CSS code id's? // HYPERLINKS ANIMATION & DESIGN .sqs-block-html p a, .sqs-block-markdown p a, .collection-type-products.view-item p a { position: relative; display: inline; font-size: 1em; font-weight: 400; color: navy; overflow: hidden;} .sqs-block-html p a, .sqs-block-markdown p a, .collection-type-products.view-item p a { /* Same as before */ background: linear-gradient(to right, red, red 50%, navy 50%); } .sqs-block-html p a, .sqs-block-markdown p a, .collection-type-products.view-item p a { /* Same as before */ background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; background-position: 100%; } .sqs-block-html p a, .sqs-block-markdown p a, .collection-type-products.view-item p a { /* Same as before */ transition: background-position 400ms ease; } .sqs-block-html p a:hover, .sqs-block-markdown p a:hover, .collection-type-products.view-item p a:hover { background-position: 0 100%; } Thank you for any help :)
  4. I am using the Miller Template and would like a simple zoom effect when hovering over images within a grid gallery.
  5. I'm using the Bedford template and I'm trying to add text and a button that can be viewed when you hover over the images. He there is an example: http://www.devonstank.com/ -> My latest proyects Thanks!
  6. Site URL: https://www.dylans.studio/new-page Hi Tuanphan! I'd love your help with a CSS problem. Is there a way you can change an image (poster block) to another image/video on hover? Thank you!
  7. 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/
  8. Hi all! I need a bit of help with adding a hover effect over the masonry grid for 7.1. I'd like the description on the masonry grid to show on hover, as well as darken the image itself. Example: http://demo.squarestud.io/grid-gallery-9 I've read through a lot of other posts, but can't quite seem to find exactly what I am looking for. Any assistance would greatly be appreciated!! Thank you in advance! Diana
  9. Site URL: http://www.cleod9music.com/#index Hi all! I've looked on some other forums, but haven't been able to get an answer that works for my site and was hoping someone could help me out. I'm a novice with CSS and I'm currently trying to add a Hover title to my gallery grids on my website. I inserted the following custom CSS and was able to get a hover to display on my grid galleries, however, I'm not able to display the title over the hover. Please let me know if any of you have had experience with this or might have a solution to fix the problem, thank you in advance!! .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-hover .intrinsic .image-caption-wrapper { background: #fddcce; opacity: .9; } .sqs-gallery-block-grid .slide .margin-wrapper:hover a.image-slide-anchor { opacity: .1; -webkit-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; -moz-transition: opacity .3s ease-in-out; -o-transition: opacity .3s ease-in-out; -ms-transition: opacity .3s ease-in-out; } .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { display: block; position: absolute; top: 110px; right: 0; bottom: 0; left: 0; padding: 2em; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out; margin-bottom: 0px !important; } .sqs-gallery-block-grid .slide .margin-wrapper .image-slide-title { color: #273845; opacity: 0; text-transform: uppercase; font-size: 18px; line-height: 125%; letter-spacing: 2px; margin-bottom: 240px; } .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { color: #273845; opacity:1; text-transform: uppercase; vertical-align: middle; font-size: 18px; line-height: 125%; letter-spacing: 2px; margin-bottom: 240px; } @media only screen and (max-width: 400px) { .sqs-gallery-block-grid .slide .margin-wrapper:hover .image-slide-title { color: transparent; opacity: 0; } }
  10. I have an image hover CSS code implemented, but it affects all images on my site. Is there a way to affect just the linked images? This is the code I am currently using: .sqs-block-image .intrinsic .image-block-wrapper img:hover { opacity: 0.5; }
  11. Site URL: https://www.relead.dk/forside-ny Hi all, Trying to make a hover function on our employee gallery, showing their contact info (caption) when hovering the mouse over image. Like this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade But I am having a hard time controlling the placement of caption text. Also hiding the white space below each image. I only want 5px space between. My code: .gallery-grid-item-wrapper:hover .gallery-caption .gallery-caption-grid-simple { visibility: visible; opacity: 1; } .gallery-caption { visibility: hidden; opacity: 0; } Hopefully some of you can help me 🙂 Thanks /Morten
  12. https://fish-buttercup-5p2r.squarespace.com pass: squarespace got the text to hover, but having issues making the text center?
  13. Site URL: http://www.caitlinhutson.com I have already copied a CSS to change opacity of the overlay on my posters when hovering. The code I used is the following: .image-overlay {opacity: 0; transition: .3s ease;} .image-overlay:hover { opacity: 1} It gives the effect of turning the whole block from my image to an opaque green, with the text showing in both. However, when not-hovering, I added a background color to my Title Text to make it easier to read, and I would like that background to fade out as the opaque green fades in (since the text is very visible on the green without that extra coloring). I tried to use the same format as above but can't figure out what the item is called to make this change. I am looking to do it to all of my posters, so a code that applies to all would be awesome.
  14. Hi, I am working on Squarespace 7.1 and I am looking to create a gallery page with titles on each image as you hover over them through custom css. (I want to use a masonry gallery as my landing page that clicks through to each project). Alternatively, I would like to know if it's possible to covert a portfolio index page to masonry - the only available option at the moment is to have equally sized squares.
  15. I'm currently using the template Barbosa in 7.1. I want to add hover actions to the nav bar so that when you hover over the pages the nav text turns from gray to pink. I also want this to happen with the all of the buttons on the page. I have not changed any styling on the page besides adding the following custom CSS. Working CSS: a:hover { color: rgb(254,64,230); } a#site-title:hover { color: rgb(254,64,230); } This css works in changing the color of the title of the page and of the hyperlinks. I thought that the a would work for the nav bar as well but apparently not. Thanks, Cecelia
  16. For some reason, a hover effect is showing up on active pages on nav links. For instance, navigate to About page. If you mouseover the About page link, the opacity changes. I have not applied any custom CSS. This came with the starting template. I can't find anything in the Design settings, or otherwise. Chrome inspector shows: body:not(.tweak-transparent-header) .header-nav-item--active a:hover { opacity: .7; } body:not(.tweak-transparent-header) .header-nav-item--active a:hover { opacity: .7; }
  17. Hi, I'm trying to change the color of a link, only on hover and when it's active. It currently works properly in my Nav, but I'd like everywhere else, specifically in body text and h2 (for example in the footer and the About page). Links should be black until you hover or they're active, when they should be #FFD801. I'm using the York template and my site is https://www.sarahrabinovich.com/. Thanks!
  18. 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
  19. 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; }
  20. Site URL: https://stillebliksem.squarespace.com Hi, i would like to disable to click through in this portfolio section. I do want to keep to hover effect that displays the pictures. When i add a 'no pointer event' ass custom code the click through is disabled but the hover effect is gone. I used this portfolio as a client list. There is no need on this page for a click through as I am building a complete portfolio on a different page. Any help is appreciated!
  21. Site URL: https://coyote-aqua-7bd9.squarespace.com/ Hello, I'd like to change the hover color on my social icons to #90babb I am pasting this code within Design > Custom CSS Window and it's not working: .header-actions-action.header-actions-action--social a:hover svg { fill: #90babb !important; } Thank you in advance for the help! NS
  22. Site URL: https://css-tricks.com/moving-backgrounds-with-mouse-position/ Hello, So i am new and need help https://css-tricks.com/moving-backgrounds-with-mouse-position/ how can i impement this to my background or a picture? I need help ASAP
  23. Site URL: https://hidano-demo.squarespace.com/ I'm in the process of building a new site to switch to 7.1 from the old platform, and I'm trying to use the portfolio function. One of the options is: Hover: Background - Displays the sub-page titles in a stacked or inline layout. When hovering over a title, the sub-page thumbnail replaces the section background. You can see the exact scenario on the Hidano demo https://hidano-demo.squarespace.com/ which is set to Hover: Background in the settings. Shouldn't the background change when you hover over the sub page titles (availability, amenities etc)? Nothing seems to happen for me. None of the portfolio hover options work in fact. I'm using Chrome. Am I understanding it incorrectly? Thanks for your time.
  24. Site URL: https://sarah-ward-interiors.squarespace.com/config/settings/site-visibility Hello, I am wondering how I can modify the CSS on my site to make a full image a hyperlink when I have a full image caption overlay active? I currently have the caption text activated as a link button, but I'd like the whole image to activate as the link. Question is applicable to the Portfolio page only of the site. Password is SWI2020. Thanks!
  25. Site URL: https://peterhadfield.com Hi there, Does anyone know how to add hovering titles to gallery images or video in the Wells Template? I assume I need to add CSS to achieve that, but I don't know much about CSS 😕 Any help appreciated. Thanks Peter
×
×
  • Create New...