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 helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? 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 helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? 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
  • 5 months later...
  • 4 months later...
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?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 7 months later...

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.

Link to comment

To create a transition or fade effect between two image blocks on a webpage, you can use CSS animations or JavaScript. Here’s a basic example using CSS for a fade effect, and JavaScript for a swap effect:

CSS for Fade Transition

You can achieve a fade effect between two images using CSS transitions and opacity:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    .image-container {
        position: relative;
        width: 300px;
        height: 200px;
        overflow: hidden;
    }
    .image-container img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: opacity 0.5s ease-in-out;
    }
</style>
<title>Fade Transition Example</title>
</head>
<body>

<div class="image-container">
    <img id="image1" src="image1.jpg" alt="Image 1">
    <img id="image2" src="image2.jpg" alt="Image 2" style="opacity: 0;">
</div>

<button onclick="fadeImages()">Fade Images</button>

<script>
    function fadeImages() {
        var image1 = document.getElementById('image1');
        var image2 = document.getElementById('image2');

        // Toggle opacity to create fade effect
        if (image1.style.opacity === "0") {
            image1.style.opacity = "1";
            image2.style.opacity = "0";
        } else {
            image1.style.opacity = "0";
            image2.style.opacity = "1";
        }
    }
</script>

</body>
</html>

Explanation:

  • HTML Structure: The HTML includes a container div with two img elements inside it. Initially, one image is fully visible (opacity: 1) and the other is hidden (opacity: 0).

  • CSS Styling: The .image-container is styled to be a fixed size with overflow: hidden to ensure images don't overflow. Each image inside it is absolutely positioned to fill the container, and transition is set on opacity property to control the fade effect.

  • JavaScript Function (fadeImages): This function toggles the opacity of the two images when a button is clicked. When the opacity of one image is set to 1, the other image's opacity is set to 0, creating a fade effect between the two.

Notes:

  • You can adjust the transition duration (0.5s in this example) in CSS to make the fade effect faster or slower. like this page https://picartpremium.com/blur-background-in-picsart/
  • Ensure your image paths (src attributes) are correctly pointing to the actual images you want to display.
  • This example uses inline JavaScript (onclick attribute on the button). For more complex scenarios or better separation of concerns, consider using event listeners and defining functions in a separate <script> block or file.

This approach provides a basic fade effect between two images using CSS transitions and simple JavaScript to toggle between them. For more complex transitions or swapping effects, you might consider using CSS animations or JavaScript libraries like jQuery or GSAP (GreenSock Animation Platform).

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.