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

Search the Community

Showing results for tags 'transition'.

  • 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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Hi, The fade transition time between images in a 7.1 Gallery Section Slideshow is too abrupt. SS cannot assist as it requires code injection. Does anyone know of some code that will slow the fade down so there is a slow cross-fade effect between images? The code below works in 7.0 (in the page's CSS) but it doesn't work in 7.1 (Gallery Section inserted into a Blank Page). Many thanks. <style> .slide { visibility: visible !important; -webkit-transition: opacity 2s ease-in-out; -ms-transition: opacity 2s ease-in-out; -moz-transition: opacity 2s ease-in-out; -o-transition: opacity 2s ease-in-out; transition: opacity 2s ease-in-out; } </style>
  2. Site URL: https://codepen.io/soulwire/pen/mErPAK Does anyone know how to apply this effect - https://codepen.io/soulwire/pen/mErPAK
  3. Site URL: http://mirandameeks.com/ Hello, I'm new to CSS and I can't figure it out! I'd like to be able to present my portfolio in full color when you first visit the site, but once you hover over an image in the gallery section, the rest of the images fade to grayscale while the current hovered image maintains its color. Sort of a hover effect on everything but the hovered image, almost like a spotlight, if that makes sense. My old website did it and I can't remember how I added it: http://mirandameeks.com/ Another example is this: https://codepen.io/jensgro/pen/ohdgF I currently have this custom CSS, which has the right hover effect, but it's only affecting the hovered item. I would like this effect, but opposite (i.e. affecting the other gallery images instead): .gallery-masonry-item img{ filter:grayscale(0%); transition:10s; opacity: 1; transition: 1s; } img:hover{ filter:grayscale(1); opacity: .7; transition: .7s; } It's important that the items maintain their color on their own, but only become grayscale once you hover over an image. Everything else I could find online sets the images to a grayscale filter "permanently" which I don't want. Thanks for your help, much appreciated!
  4. Site URL: https://cforc.quebec I would like to ask you if the is a possibility to β€œ rename β€œ ( translate ) change almost all words in shopping cart section. Expressions such as ITEM, QUANTITY, PRICE, adding to cart, added, checkout etc - I need to have all in my language. In settings / Language - is an option to change language but doesn’t work. Thank you very much in advance
  5. Site URL: https://www.laterwolf.com Hi! I can't seem to find out how the designer of this page managed to create the transition/reveal effect in between pages. You'll see what I mean when you click on a page in the navigation (Info). Is this something I can do with CSS? I'm using Brine 7.0 so there's no site-wide animations built-in. Thanks for any help with this!
  6. Site URL: https://www.alliancepackaging.ie/ Hi I have two large gallery slideshow banners (full width) at the top of my homepage but the animations between the images are not working. When I apply one it animates once and then never again. I have some code on the site but this issue was there before I added it. I wanted to see if anyone had come across this before. Site is in 7.1
  7. Site URL: https://point-rhino-wlwc.squarespace.com/keynote-speakers Hi, I have been building this site and I'm struggling with one particular section. If you scroll down to the image grid I basically want it how it is with the hover and transition but on larger screen sizes there is a cut off on the overlay. Please can you advise me on a simpler way to do this? https://point-rhino-wlwc.squarespace.com/keynote-speakers Password 7mJZqnZWtATh84H6 Thanks you!
  8. Site URL: http://www.inkhartz.com I would like my images to fade more slowly into/out of each other. I can't find any code that does anything. Can someone please help?
  9. Site URL: https://grouse-seal-j62k.squarespace.com/home site pass is "prince" I'm wondering if someone can help me as I'm pulling my hair out trying to fix this. Firstly, the page I'm trying to fix only appears on mobile, the desktop version has a background video and is irrelevant here. The issue I'm having is that on the mobile homepage I have a full screen slideshow, however, the transitions are incredibly abrupt. They do the desired "fade" once maybe every 5 or 6 transitions, otherwise it just switches images suddenly. Now if I'm looking at this page on the squarespace mobile view, no issue, it transitions smoothly, however, as soon as I look at it on my actual phone, it has the abrupt transitions. I even tried this code from user "rwp" to slow down transitions. .gallery-fullscreen-slideshow-item-img{ transition: opacity 1600ms ease-in-out !important; -webkit-transition: opacity 1600ms ease-in-out !important; -ms-transition: opacity 1600ms ease-in-out !important; -moz-transition: opacity 1600ms ease-in-out !important; -o-transition: opacity 1600ms ease-in-out !important; } //.gallery-fullscreen-slideshow[data-transition="fade"] .gallery-fullscreen-slideshow-item[data-active="true"] .gallery-fullscreen-slideshow-item-src{ transition: opacity 1400ms ease-in-out !important; -webkit-transition: opacity 1400ms ease-in-out !important; -ms-transition: opacity 1400ms ease-in-out !important; -moz-transition: opacity 1400ms ease-in-out !important; -o-transition: opacity 1400ms ease-in-out !important; } Again, it works beautifully on desktop and the squarespace mobile view, but has no effect when viewing on an actual mobile phone. I've scoured the web for an answer but it seems it's not a common problem. Does this have something to do with my mobile browser? It's Chrome on a Galaxy Note 10. Any answers or guidance would be appreciated as I have to take this site live in the next few days and I need a mobile home page.
  10. Site URL: https://lars-pilgaard.squarespace.com/?p I run 2 Squarespace websites and want to make 1 website out of the 2. I could copy all text, download all photos and write down all links from the 1 and apply it to new pages on the 2nd. But if I could transfer everything as pages from the 1 to the 2nd, thus keepng links, etc., it would be brilliant. Any suggestions much appreciated. Thank you much.
  11. Hi there, I'd love to use the `flex` animation on my site as the elements load in. However I dislike how it also applies to my button's hover state. I'm trying to figure out how I can remove the `flex` animation. I inspect the CSS and try to override it using custom CSS but in vain. Anyone has any ideas how to do it? Cheers, Venn.
  12. Hello everyone, Please lend me your help. Upon hover, my gallery images zooms in and out, the zoom in transition is smooth but the zoom out effect is rather sudden so the end result looks jumpy. Here is the code I used: .gallery-grid-item img:hover{ transform:Scale(1.1); transition-duration: 1s; } .gallery-grid-item {overflow:hidden!important } Please someone tell me what I did wrong in my code. Here is the link to my gallery: https://www.ptphotography.com/stmoritz-badrutts-palace-hotel-switzerland For reference, we want to achieve the same smooth transition like this product page: https://www.ptphotography.com/destination-trial I used the same code for the product and gallery page but I don't know why they have different effect. Please help πŸ™ Thank you in advance, Kind regards, K
  13. Hi there, I'd like to add a background to my website that is similar to this example: https://www.ginlane.com/ I've managed to work out how to just add a background color gradient, but it isn't quite the effect I'm after and I'd more so like to add a gradient/color change that activates on scroll. As I will be using colors that don't necessarily gradate (as per the example above), I'm wondering if instead of looking for a gradient option I should be looking for an option that would offer a smooth transition between background colors instead? I'm using the Mentor template, which is in the Brine family. Any help or suggestions are greatly appreciated! Thanks, Jessica
  14. I'm working on a site not yet live and trying to have the cover page transition after 5 seconds into the homepage in a creative way. I'm using the following to provide the transition: <meta http-equiv="refresh" content="5;url= my client's website URL " /> This works great but the transition is abrupt. I'd like to offer maybe a fade or other creative transition into the homepage. I would love suggestions of how to do this. Thank you.
  15. Hello Squarespacers! On my page www.plutodesign.cz I use slide transition with arrows both on left and right which works as supposed to. ON MOBILE it doesn't (simply a stupid UI/UX decision), it uses just an arrow RIGHT, you never can go back left. Also "slide click through" doesn't work on mobile. Users can slide just right and be perplexed they can't go back. The worst part is, IF "fade transition" is used it works like a charm (I told you, stupid UI/UX) but it is not what it is supposed to look like on mobile. Is there a way I could remedy this design flaw with CSS? Thanks ahead for any good advice to solve this annoying problem!
  16. Site URL: https://www.futureofwhen.com I have a black background. I want the background image to transition when you hover over it. Also, can I make my background image a link to my contact page?
  17. Site URL: https://www.futureofwhen.com Hello, Im trying to achieve a black full-bleed landing page, but I want a simple "clickthrough" transition to play when you hover over the page with the mouse. I want the black background to slightly crack open on the right side of the page, as though a "door" was opening into a white space. The background that is on the site currently is the image I want the "updated" black background to transition to when you hover over it. I want this transition to "clickthrough" to the contact page that I've already made. How can I achieve this today? futureofwhen.com pw-letuspray
  18. Is there any way to slow down the transition between the menu from the two lines to the cross?
  19. Site URL: https://www.triple8dancecompany.com/company Hi, I'm trying to alter Squarespace's default settings for a hover caption overlay using Custom CSS. I want to change the transition time so that the image caption fades in and out instead of appearing immediately. This is my current code: .image-caption { left: 50%; position: absolute; top: 55%; width: 100%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .image-caption p { font-size: 17px !important; font-weight: semibold !important; color: #ea4e4c !important; text-transform: uppercase; line-height: 120% !important; letter-spacing: 2px !important; opacity: 1 !important; overflow:hidden; } .image-caption-wrapper { top: 0 !important; padding-top: 93% !important; background: #000000 !important; opacity: 1 !important; text-align: center; pointer-events: none; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; /* future proofing */ -khtml-border-radius: 50%; /* for old Konqueror browsers */ } I'm guessing I have to add a line like "transition: 0.3s ease-in-out;" but I'm not sure where. Any help would be appreciated -- thanks!
  20. Site URL: http://www.brndnyn.com Hello- So I've been trying to change the transition time for my index titles that go over the images. I'm currently using Avenue as my template. As it is now, the hover makes the opaque color and text appear a little too quick- I'd like to change that to a slower fade in. However, none of the other code I could find for hover transitions worked for this template. I can't seem to find the tag that effects the title. I'm also trying to get my main title and navigation links to ease out when the mouse is no longer hovering, if that's possible. Would love any help! Thanks πŸ™‚
  21. Hi everybody. Im am building a website all black and white but the transitions between pages are white? Does anyone have this problem or can anyone help with this please? I contacted help centre but they suggested to ask here in the forum. thanks in advance for your help
  22. Site URL: https://pufferfish-llama-7l86.squarespace.com Hi, I have been trying to speed up button hover effects but the css code I am using has no effect: " .sqs-block-button-element:hover { background-color: rgba(0, 0, 0, 1) !important; transition-duration: all 0s !important; transition-delay: all 0s !important } " The background-colour line has the desired effect so I thought the transition-duration line would also work, but it has no effect. Any suggestions? Liam
  23. Site URL: http://www.parallel.studio/ I am looking for a template that would allow me to have pages that wipe one to the next like they do on the homepage of this site: https://momentfactory.com/home Is this possible with squarespace, and if so is there a specific template that I should be using? I can't even figure out what this "effect" is called, and I'm having trouble searching it out... Thanks!
  24. Site URL: https://seadragon-pear-6ndb.squarespace.com/ password: op1 I'd like to slow down the fade transition -- and keep the text and photo transitioning at the same rate -- in my slideshow gallery on my home page. I have tried the following code and a few other variations, but all of the options I'm finding from past forum discussions are causing the text to fade in more quickly than the photo. Any ideas? .slide { visibility: visible !important; -webkit-transition: opacity 3s ease-in-out; -moz-transition: opacity 3s ease-in-out; -o-transition: opacity 3s ease-in-out; transition: opacity 3s ease-in-out; }
  25. The website is https://www.marylucier.net/, and the page I need help with is https://www.marylucier.net/installations. Does anyone know how to remove any and all types of transitions for slideshow image galleries? I have fade has my default transition, but I really don't need a transition in the image gallery. I have tried: .slide { visibility: visible !important; -webkit-transition: opacity 0s ease-in-out; -moz-transition: opacity 0s ease-in-out; -o-transition: opacity 0s ease-in-out; transition: opacity 0s ease-in-out; } but the fade was still there, so I took it out. I also implemented: .slide {; opacity: 1 !important;; } This removes the fade, but there is still a delay between the images. Therefore, when I click from one image to the next, the previous image lingers in the background for a second after the new image comes up. Does anyone know how to remove this delay? It's not noticeable with images that are the same size, but for images that are different sizes it looks incredibly strange. Thanks in advance!
  • Create New...