Transition/fade/swap between two image blocks

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! 

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.

@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!

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?

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

@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. 

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.

@Ziggy where would I add the sectionID to isolate the section of images I want to transition. Tried a couple things and and its not working th

Yes, I'm trying to find the same answer. How can I target a specific section ID? That would solve a lot of problems for me.

8 minutes ago, Raygun said:

Yes, I'm trying to find the same answer. How can I target a specific section ID? That would solve a lot of problems for me.

You can find ID's with this chrome extension:

https://squarefortytwo.com/squarespace-guides/find-an-id-in-squarespace-71

How do you want to use them?

I am making a website for myself and am NOT a web designer (so apologies if I'm missing the obvious) but was hoping to have 3 images on a loop.  Can anyone tell me how to modify this very helpful bit of code to work for 3 images instead of 2? And ideally, they'd just transition on a timer, and hovering / clicking  on the images wouldn't change anything.

On 7/18/2024 at 2:31 AM, EZornoza said:

I am making a website for myself and am NOT a web designer (so apologies if I'm missing the obvious) but was hoping to have 3 images on a loop.  Can anyone tell me how to modify this very helpful bit of code to work for 3 images instead of 2? And ideally, they'd just transition on a timer, and hovering / clicking  on the images wouldn't change anything.

I think this code won't work with >2 images

You can consider use a gallery block, then set autoplay, so images will change after some seconds