Jump to content

Transition/fade/swap between two image blocks

Recommended Posts

Sorry if this was posted somewhere already. I tried so many different youtube videos and what not and couldn't get it to work. I mashed some info I found together and found a really simple way to do this. This is my first post here haha. I also have very minimal coding experience so if anyone sees a better way to do this feel free to comment =]

I'm using SS 7.1 + Fluid engine.

  1. Stack your two images on top of each other. The one you want to transition to should be "stacked" behind.
  2. Go to Page Settings - Advanced
  3. Enter the following code

    <style>.image-block {

    transition: all .5s ease-in-out;}

    .image-block:hover {
    background-color: #00000; opacity: 0; transition: all .3s ease-in-out;}</style>

  4. Adjust transition speed as needed. ".3s" or ".5s" - Using a higher number = slower. Using a Lower number = Faster ("s" is for seconds)

If you don't want some images to change, then just stack two of the same photo. 

*found part of the code from a member on another post but cant find it. but credit to him for his help. 


And that's it! 

 

Link to comment
2 minutes ago, ConradZ said:

If you don't want some images to change, then just stack two of the same photo. 

That seems like a rather strange suggestion, can't be good for loading times.

I would suggest doing this in a much more targeted way, adding the hover effect specifically just to the image blocks that you want to fade on hover. You can do this by using the individual block IDs.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

@Ziggy
good point! didn't think of that. 

I tried some method targeting specific blockID but the image wouldn't overlap 100%

both images are 1920x1080.
I think the issue is that you can't specify the "image block" dimensions in fluid engine. so the second image just tries to fill the entire block instead of replacing the first image =/. So when they transition, they aren't lined up perfectly and things move. 
Tired doing it with the "fit" and "fill" option but get weird scaling issues. 

Im sure there's probably some fix to this, but beyond my knowledge when it comes to all of this. 
if you have any suggestions that would be awesome.

thanks!

Link to comment

Using FILL on the images will scale the image and crop when necessary, you'll probably just have to design around that.

Can you share your website and the page you are testing this on?

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
  • 1 month later...

I am literally losing my mind here. So it seems that in 7.0 one can do a simple transition effect but not in 7.1 unless it's on a blog page? Have they completely lost  their minds? Because I have lost mine. I can see one can't go  backwards to V7 (I don't recall even having a choice in the matter).

Meanwhile I have a client who understandably is impatient for what in any other format would be a pretty simple request. I will try your version - though I'm a designer, not a coder, so who knows what fresh hell I will end up unleashing on the website.

Yours is the first glimmer of hope. God there must be a better way to make a living.

Best wishes from London, Susanne

Link to comment

@IncahootsLondon

I can't recall that any of the older versions of SQSP offered this tool in a flexible manner. Since you mention that you're a designer with a client who's impatient, I can suggest trying this option. It's built using Squarekicker, which, in case you don't know it, is a great tool to expand your SQSP experience. 

https://www.youtube.com/watch?v=vEdS70-hXdw

P.S. I am a designer convinced of and using Squarekicker without any affiliation. 

 

Link to comment

Thank you so much for responding, Marc.

And for your advice. It does look really good but unfortunately I have to use 4 images. It's utterly maddening because in the olden days of Wordpress it would be a relatively easy RevSlider thing to do. That said, I vowed never to do a Wordpress site in my life.

All my client wants - and frankly not unreasonably - is to have a square image that transitions to the next image and then the next or set amount of seconds. How hard is that?!

And then also - and I imagine this is also impossible or near-impossible but they would like the menu names to be like something they use in their printed work. But it's in italics and I am assuming that because the menu is generated once a new page is created that it is impossible to amend it.
For example: [ film ]  [ events ]

Massive sigh.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.