Images - Creative Elements Documentation

English

French

German

Images lets you define the default appearance of images across your store. Create consistent borders, corner rounding, opacity, shadows, and CSS filter effects, with separate settings for the Normal and Hover states.

Using these settings as site-wide defaults helps images remain visually consistent across different pages and widgets without repeating the same styling on each image.

Tip: Keep global image styling relatively neutral. Theme Style affects images throughout the site, so stronger decorative effects are usually better applied only to the specific images that need them.

Normal

Define the default appearance of images before interaction.

Border: Configure the border type, width, and color.
Border Radius: Round the image corners. Link the values to use the same radius on every corner or unlink them to control each corner separately. Available units are px and %.
Opacity: Control image transparency from 0.10 to 1. A value of 1 displays the image fully opaque.
Box Shadow: Add an outer shadow around images. Configure its horizontal and vertical position, blur, spread, and color.
CSS Filters: Adjust the visual rendering of images using Blur, Brightness, Contrast, Saturation, and Hue.

Hover

Define how images change when the visitor moves the pointer over them.

Border: Configure the border type, width, and color displayed on hover.
Border Radius: Set the corner radius used on hover. Available units are px and %.
Opacity: Set image transparency on hover from 0.10 to 1.
Box Shadow: Configure the outer image shadow displayed on hover.
CSS Filters: Apply Blur, Brightness, Contrast, Saturation, or Hue adjustments to the hovered image.
Transition Duration (s): Set how long the transition between Normal and Hover styles takes. The value can be set up to 3 seconds in 0.1-second steps.

Normal and Hover states

The Normal state defines how images appear by default, while the Hover state lets you change their appearance when a visitor interacts with them.

Because the same main properties are available in both states, you can create subtle interactions without custom CSS. For example, an image can become slightly brighter, gain a shadow, or change opacity on hover.

Tip: Hover effects usually feel best when the Normal and Hover states are closely related. A small change in brightness, opacity, or shadow can provide clear feedback without distracting from the image itself.

Borders and Border Radius

Borders can help images fit into a structured interface, while Border Radius can match the corner treatment used by cards, buttons, and other components.

Border Radius is responsive, so it can be adjusted independently for desktop, tablet, and mobile. Percentage values can also be used when the rounding should scale with the image dimensions.

Tip: If your design uses rounded cards and buttons, using a related radius for images can make the interface feel more cohesive.

Opacity

Opacity controls how transparent an image appears. A value of 1 displays it normally, while lower values make it increasingly transparent. Different Normal and Hover values can also create a simple interaction effect.

Note: Theme Style limits image opacity to values between 0.10 and 1, so images cannot be made completely invisible with this control.

Box Shadow

Box Shadow adds depth around images and can help separate them from the background. You can control the horizontal and vertical offset, blur, spread, and shadow color.

The shadow position option available in some Creative Elements Box Shadow controls is excluded here, so Theme Style Images uses the standard outer shadow behavior.

CSS Filters

CSS Filters modify how an image is rendered without changing the original image file. They can be configured independently for the Normal and Hover states.

Blur: Softens image details.
Brightness: Makes the image lighter or darker.
Contrast: Adjusts the difference between light and dark areas.
Saturation: Increases or reduces the intensity of the image colors.
Hue: Shifts the image colors around the color spectrum.

Tip: CSS Filters are particularly useful for hover interactions. For example, reduce Saturation in the Normal state and restore it on Hover, or slightly increase Brightness when the visitor points at an image.

Transition Duration

Transition Duration controls how quickly the image changes between its Normal and Hover styles. It does not create an effect by itself; it controls the timing of the style change.

Tip: Short transitions generally feel more responsive. Very long transitions can make hover feedback feel delayed.

Image carousels

The Normal Border Radius setting also applies to items inside Creative Elements image carousels, helping carousel images follow the same corner styling as other images.

Global styles and individual image styles

Theme Style provides the default image styling, while individual widgets can still define their own image styles. Local widget settings, the active PrestaShop theme, or custom CSS may therefore override the global values.

Tip: Use Theme Style for the common case and local styling for exceptions. If you repeatedly apply the same settings to individual images, consider defining them here instead.

Recommended workflow

Decide whether images need a global border or should remain borderless.
Set a consistent Border Radius if rounded imagery is part of your design system.
Keep Normal Opacity at full visibility unless the design intentionally uses a faded appearance.
Add a subtle Box Shadow only when images need separation from their backgrounds.
Use CSS Filters sparingly in the Normal state.
Configure the Hover state when images benefit from interaction feedback.
Set a Transition Duration that makes the change feel smooth and responsive.
Use individual widget styles only when a specific image needs to differ from the global design.

Good to know: Since these settings target images globally, always review important image types across the storefront after making a significant change.