Add Opacity Property for Images in Frappe Builder

[aidemkin]

To enhance design flexibility in Frappe Builder, it would be useful to add an opacity property for image components. This feature will allow users to adjust the transparency of images, improving the visual quality and design versatility of pages created in Frappe Builder.

Detailed Description

Opacity control is a common design tool in modern page builders. By allowing users to set the transparency level for images, Frappe Builder can support more advanced design needs, such as:
• Layered designs (e.g., combining a semi-transparent image over a background).
• Subtle visual effects that do not overpower other page elements.
• Improved usability for overlays and banners.

Key Features

1.	Opacity Slider: Add a simple slider or input field in the image component settings to adjust transparency levels (e.g., 0% to 100%).
2.	Preview in Builder: Changes to opacity should be visible in real-time within the builder interface.

Example Use Cases

•	Semi-transparent logos or watermarks.
•	Background images with reduced opacity to make text more readable.
•	Creative designs with overlay effects.

Benefits

•	Enhances the design capabilities of Frappe Builder without requiring custom CSS.
•	Enables users to create professional, visually appealing designs easily.
•	Increases the flexibility of image styling.