Instructions
1. Install the Plugin:
Add the "Zoom on Hover (Magnify)" plugin to your Bubble application from the marketplace.

2. Add the Plugin Element:
Drag and drop the "Zoom on Hover (Magnify)" element onto your page in the Bubble editor. This is a non-visual element that acts as a controller.

3. Prepare Your Target Element and Image (Crucial for High-Resolution Zoom):

a.  Create a Group Container: For best results and to ensure the zoom is contained, drag a Bubble Group element onto your page. This Group will serve as your hover target and boundary for the zoom effect.

b.  Assign an ID Attribute to the Group: Select this Group element. In its property editor, scroll down to the "ID Attribute" field and assign a unique ID (e.g., product_image_zoom, gallery_item_1). This ID will be used by the plugin.

c.  Embed Your High-Resolution Image using an HTML Element:
* Drag an HTML element from the visual elements panel into the Group you just created.
* In the HTML editor for this element, paste the following code, replacing [YOUR_IMAGE_FULL_URL_HERE] with the direct, full URL to your high-resolution image file (e.g., from Bubble's file manager or an external CDN):

       ```html
       <img src="[YOUR_IMAGE_FULL_URL_HERE]" style="width: 100%; height: 100%; object-fit: cover; display: block;">
       ```
   * **Important Note on URL:** To get the *full resolution* of an image uploaded to Bubble, you typically need to reference its direct S3 URL. You can find this by inspecting an existing image element on your live page or by directly referencing the image field from your database (e.g., `Current cell's Image's URL` if inside a Repeating Group). Ensure there are **no square brackets `[]`** around the URL in the `src` attribute itself, as these are for Bubble's dynamic expressions and will break the HTML.

   * **Dynamic Image Example:** If your image source is dynamic (e.g., from a database field `Product's Image`), your HTML element content would look like this:
       ```html
       <img src="<img_element_or_database_field's_value_here>" style="width: 100%; height: 100%; object-fit: cover; display: block;">
       ```
       (Replace `<img_element_or_database_field's_value_here>` with Bubble's dynamic data insertion, like `Current cell's Product's Image's URL`).

d.  Alternative (for basic content or if full resolution isn't critical): While using an HTML element is recommended for high-resolution images, you can also place a standard Bubble Image element or any other Bubble visual element directly into your target Group. Be aware that standard Bubble Image elements may be optimized (downscaled) by Bubble, potentially leading to a less crisp zoom on very large images.

4. Configure the Plugin Element:
Select the "Hover Zoom Container" element you added to the page. In its Property Editor, configure the following fields:

Target Element ID:
Type: text
Description: Enter the ID Attribute you assigned to the Bubble Group (e.g., product_image_zoom). This tells the plugin which element to control.

Zoom Level:
Type: number
Description: Set the magnification factor for the zoom. A value of 1.2 means 120% zoom, 1.5 means 150% zoom, and so on.

Transition Duration:
Type: number
Description: Define how long the zoom-in and zoom-out animation should take, in seconds (e.g., 0.3 for 0.3 seconds).

Notes on Layout & Styling:

Overflow Hidden: The plugin automatically sets overflow: hidden on your target container to ensure that the zoomed content stays within its original boundaries.
Image Sizing within Group: The style attributes (width: 100%; height: 100%; object-fit: cover; display: block;) within your <img> tag are crucial. They ensure the image fills its parent group and handles aspect ratio correctly.
Performance: While enabling full-resolution zoom, be mindful that very large image files can impact page load speed. Use this feature judiciously for optimal user experience.

Demo Application:

See a live demo of this plugin in action here: https://zoom-on-hover.bubbleapps.io/version-test

To see how this plugin is implemented in a Bubble workflow, view the demo app's editor here: https://bubble.io/page?id=zoom-on-hover&test_plugin=1748271680746x847526802712952800_current&tab=Design&name=index&elements=bTGYf