B4A Library [B4X][B4A] B4XDaisyHover3d - Bring Interactive, Modern 3D Hover Effects to Your UI!

Hi Fam

Are you looking to add that "wow" factor to your app interfaces? I'm excited to introduce B4XDaisyHover3d, a new component that brings highly interactive, modern web-style 3D hover effects straight to your B4X projects! Inspired by DaisyUI components, this view completely transforms passive image galleries or custom layouts into engaging, tactile experiences.

Key Features:

• True 3D Tilt: Adjust the MaxTilt and Perspective to create realistic depth based on user interaction.
• Scale & Shine Effects: Automatically scale up (ScaleOnHover) and apply dynamic highlight sheens (ShineEffect) as the user navigates over the surface.
• Tailwind/DaisyUI Styling: Use familiar utility tokens to handle styling! Effortlessly pass strings like rounded-2xl for border radius or p-[15px] for padding.
• Two Content Modes: Use ContentType = "image" to easily render high-quality assets, or use ContentType = "custom" to nest complex B4X views inside the 3D surface shell.
• Drop Shadows & Theming: Integrated support for dynamic hover shadows (e.g., lg, xl) and background variants.

Simple Usage Example:
Getting started is incredibly easy. Here is a quick snippet demonstrating how to initialize an image card with the 3D hover effect via code:

' Ensure you declare the component in Class_Globals
Private hoverItem As B4XDaisyHover3d

' Initialize and set up the 3D hover view
hoverItem.Initialize(Me, "hoverItem")
hoverItem.AddToParent(pnlHost, 10dip, 10dip, 300dip, 400dip)

' Apply Tailwind/DaisyUI style tokens
hoverItem.Rounded = "rounded-2xl"
hoverItem.Padding = "p-[15px]"
hoverItem.setWidth("w-full")
hoverItem.setHeight("h-[400px]")

' Set the content to display an image
hoverItem.setContentType("image")
hoverItem.setImage("my_beautiful_asset.png")

' Apply styling and draw the UI
hoverItem.Refresh

Drop this component into your next project and watch your UI come to life! Don't forget to handle the click events (hoverItem_Click) to make these elements functional as well.
Happy Coding!



Related Content

[B4X] [B4A] B4XDaisyUIKit - Native Components inspired by DaisyUI & Tailwind

Hi Fam Please note the source of truth for all the working examples for this library will always be the latest demo source code from github/google drive, use that rather as a reference point for your development. The library is still under development and sometimes things change and perhaps...

www.b4x.com