Image rollover to 2nd image on hover?

I Need Help
1

I understand about using hover and filters, but can I have one image rollover to a second image on hover?

2

Playing with AI… :smiley: Get tin the sandbox and have fun.

Got it! You’re looking to create an image rollover effect where one image changes to a second image when you hover over it, and you want to do this using only the Custom Interaction feature in Blocs 6 — no custom code.

Here’s how you can achieve this using just the Custom Interaction panel with hover actions:

:white_check_mark: Step-by-Step: Image Rollover on Hover using Custom Interaction

1. Add Two Images to Your Page

  • Insert two images in the desired location on your Blocs page.

  • You’ll need to place them on top of each other so that only one image is visible at a time.

  • Tip: If using Columns or a Bloc, you can place both images within the same container (so they share the same space).

2. Make the Second Image Hidden Initially

  • Select the second image (the one that will appear on hover).
  • In the Right Sidebar Inspector on the right, set its Opacity to 0% so it is hidden by default.
  • This will make sure the second image starts off invisible.

3. Open the Interactions Panel

  • Select the first image (the one that’s visible by default).
  • In the Right Sidebar, open the Interactions panel.

4. Set the Trigger to Hover

  • Click the “+” button to add a new interaction.
  • For the Trigger, select “Hover” from the dropdown. This means the interaction will activate when the user hovers over the first image.

5. Set the Action to Show the Second Image

  • In the Action dropdown, select “Show”.

  • Under the Target, select “Next Sibling” or “Select by Class” (depending on how you’ve structured the layout):

    • If the second image is directly next to the first image in the DOM, choose Next Sibling.
    • If the second image has a class (e.g., second-image), you can select it from the class list.

6. Set the Reverse Action for Hover Out

  • Now you need to specify what happens when the hover effect is removed (i.e., when the mouse moves away from the first image).
  • Click the “+” again to add a second interaction.
  • This time, for the Trigger, select “Hover Out”.
  • For the Action, select “Hide” to make the second image invisible again.
  • Again, use Next Sibling or Select by Class to target the second image.

7. Set the Second Image to Appear Smoothly

  • Go back to the second image (the one that becomes visible on hover).
  • You might want to apply a fade-in transition to make the image appear smoothly.
  • In the Right Sidebar Inspector, set the Opacity of the second image to 100% when it’s shown, and make sure its opacity is 0% by default.

8. Preview the Effect

  • Hit Preview (⌘ + P or click the Preview button) and hover over the first image.
  • When you hover, the first image should fade out and the second image should fade in.

:gear: Adjusting the Timing

If you want to make the rollover smoother, you can add transitions to the Opacity or Transform properties of the images:

  1. Select the first image:

    • In the Right Sidebar Inspector, set the transition property for opacity and/or transform. For example:

      • Transition: opacity 0.3s ease (this will control how quickly it fades out).

  2. Select the second image:

    • Similarly, set the transition for opacity so that the second image fades in smoothly.

:clipboard: Recap

To sum it up:

  • You used the Hover trigger on the first image.
  • The Show action revealed the second image when hovered.
  • The Hide action was triggered when the hover was removed (hover out).
  • Both images had opacity transitions set up for a smooth fade-in and fade-out effect.

Example Behavior:

  1. On hover, the first image fades out (opacity goes to 0%), and the second image fades in (opacity goes to 100%).
  2. When the hover is removed, the first image fades back in, and the second image fades out.
3 Likes
3

Holy snikees, Norm.
Where’d ya get this guy?

4

There is no appearance panel, Hal.

5

@Samsdad

Something like the following? Click on “Sliding Tiles”

https://www.blocs-templates.com/blocs-crumbs.html

6

The Appearance Panel is a section in the Right Sidebar Inspector of the Blocs 6 App. It lets you control visual styling properties of the selected element — without using custom code or the Class Manager.

:white_check_mark: Common Settings in the Appearance Panel include:

Setting Description
Opacity Set how transparent an element is (0% = fully hidden, 100% = fully visible).
Visibility Show or hide an element entirely on the page (e.g., hide on mobile).
Display Toggle between block, inline, none, etc.
Positioning Set layout behavior: static, absolute, fixed, etc.
Z-Index Control stack order (which elements appear in front of others).
Overflow How to handle content that exceeds the element boundaries.
Pointer Events Enable or disable interaction with the element (e.g., ignore clicks).
Transition Smoothly animate changes to properties like opacity or transform.
7

You must have forgotten this Allen :grin: @KBConcepts

4 years old, I haven’t re-looked at the project though :joy:

1 Like
8

Can that happen without the sliding action? I need one image to dissolve into a second image. Specifically, I’ll have a stylized AI composition sketch dissolve into the photo that it was derived from.

9

You would get a dissolve effect if picture 2 faded in

10

Agree, but I need a procedure that doesn’t involve a non-existent “appearance panel”.

11

@Samsdad see the thread I linked to above. I posted an example project of an image change on hover.

Since then you can now add transitions to the class in the class editor (finally!). No need for interactions it’s basic CSS.

1 Like