Image addon with beauty blend mode option and lightbox

Image Shadow
Uikit Image
Hover Shadow
Uikit Image

Blend mode

Uikit Image
Uikit Image
Rounded Corner
Uikit Image
Rounded Corner
Uikit Image
Image Modal
Uikit Image
Modal Iframe
Uikit Image
Parallax Image Animation When Scrolling
Uikit Image

Image Settings

Image settings, learn more about the image add-on settings. Here is a short overview.

Setting Description
Select Image Select an image from your Joomla! directory or upload a picture
Image ALT Enter the image's alt attributem its good for SEO
Image Border To modify the border radius of an element, like an image.
Box Shadow Select the image's box shadow size.
Hover Box Shadow Select the image's box shadow size on hover.
Link Type You can use link or modal for image when clicking on

General Settings

General settings, which are the same across all add-ons, are grouped in a General section at the bottom. Here is a short overview.

Setting Description
Blend Background Color Use the background color in combination with blend modes, a transparent image or to fill the area
Image Blend modes Determine how the image will blend with the background color.
Margin Keep the existing vertical margin (e.g. from headings), force specific margin or remove all margin. Margins of an element can be removed from the top and bottom.
Remove top margin. Use this option to remove the add-on's top margin
Remove bottom margin. Use this option to remove the add-on's bottom margin
Alignment This option specifies the alignment of an add-on according to the surrounding element
Text Breakpoint Define the device width from which the alignment will apply.
Animation Overwrite the animation settings from the section. This won't have any effect unless animations are enabled for the add-on. Or enable a parallax animation for this add-on.
Visibility Define when the add-on should be hidden.
CSS Class If you wish to style a particular content element differently, then use this field to add a class name and also refer to it in your css file.

Parallax Settings

The Parallax Animation Settings allow you to animate an add-on depending on the scroll position of the document. To configure a parallax animation,just enable the Parallax Animation feature.

Setting Description
Horizontal Animate the horizontal position (translateX) in pixels.
Vertical Animate the vertical position (translateY) in pixels.
Scale Animate the scaling. 1 means 100% scale, 2 means 200% scale, and 0.5 means 50% scale.
Rotate Animate the rotation clockwise in degrees.
Opacity Animate the opacity. 1 means 100% opacity, and 0 means 0% opacity.
Easing Determine how the speed of the animation behaves over time. A value below 1 is faster in the beginning and slower towards the end while a value above 1 behaves inversely.
Viewport Set the animation end point relative to the viewport height, e.g. 0.5 for 50% of the viewport. It is very useful to stop the animation of a text when it’s in the middle of the screen.
Breakpoint Display the parallax effect only on this device width and larger. It is useful to disable the parallax animation on small viewports.