Image Zoom on Hover Simple

Demo to preview the plugin:

Introduction

This plugin has been recently acquired by Zeroqode - please bear with us while we review the code and make improvements/fixes where necessary.
This Plugin allows you to dynamically zoom onto images by moving your cursor across the image. You can choose the scale of the zoom and the style.
This Plugin gives your users a seamless way to interact and zoom onto images in your app without zooming onto to the whole webpage.
Example uses may be: Zoom on profile pictures, zoom on images of listings on a real estate application.
Image without caption
Usage Features:
  • Add dynamic image zoom functionality to your Bubble app for enhanced visual interaction
  • Allow users to zoom on specific images by simply moving their cursor across the image surface
  • Customize the zoom scale to control how much the image enlarges on hover
  • Choose between different zoom styles to match your app’s design and user experience
  • Zoom effect applies only to images, without affecting the entire page layout or scaling the full webpage
  • Ideal for profile pictures, product images, real estate listings, galleries, and more
  • Lightweight and optimized for smooth performance on web and mobile browsers
  • Enhance user engagement by providing an intuitive, focused zoom experience
Image without caption

How to setup

  1. Add the Element
      • In the Design tab, search for Image Zoom.
      • Drag and drop it onto your page where you want the image to appear.
        • Element → Image Zoom.
          Element → Image Zoom.
  1. Set Image URL
      • Select the Image Zoom element.
      • Enter the image URL (static or dynamic).
  1. Adjust Zoom Scale
      • Set how much the image should zoom (e.g. 1.5 = 150% zoom).

Plugin Element Properties

Image Zoom

Element properties → Image Zoom.
Element properties → Image Zoom.
Fields:
Title
Description
Type
Image
Upload the image you want to be displayed
Image
Scale
How much the image should be zoomed in. Example: 2 means a zoom of times two.
Number
Move
Choose whether the image should move with the mouse move
Checkbox (yes/no)
Background size
Background size for the image Available options: contain, cover
Dropdown

Plugin Actions

Initiate Zoom

In a software plugin or API, ‘Initiate Zoom’ refers to the action of starting a video conferencing session using the Zoom platform.
Workflow action → Initiate Zoom.
Workflow action → Initiate Zoom.
Image without caption

Changelogs