1. Add the Flip Box Widget
Drag and drop the Flip Box widget into your container or section. This will be the base of your effect.

2. Clean Up the Front Side
We’re going for a minimal front face, so:

  • Remove all content from the Front Side tab.

  • Go to the Style > Background settings and choose an image.

    • Position: Center Center

    • Repeat: No-Repeat

    • Size: Cover

3. Set Your Flip Box Height
Head over to the Settings tab:

  • Define a specific height that fits your design (e.g., 300–400px).

  • Add a 30px border radius for rounded corners.

  • Change the Flip Effect to Fade for a smooth transition.

4. Style the Back Side
Now let’s design what shows on hover:

  • Use the same background image as the front side.

  • Set the background position, repeat, and size just like before:

    • Center Center

    • No-Repeat

    • Cover

5. Add a Background Overlay
This is the magic touch that makes the hover effect pop:

  • In the Style > Background Overlay section, choose a semi-transparent overlay color (like dark with 50% opacity).

6. Add Your CTA Content

  • Under Style > Content Alignment, set the alignment to Bottom.

  • Add your Call-to-Action text, a button or link, and you’re done!

7. Repeat & Customize
Just duplicate the widget and customize the images, text, and links for a seamless grid of interactive cards.

🎉 Boom! You’ve got a sleek, modern hover effect ready to wow your site visitors.