# Image Style

Allows you to style your Gallery images using a variety of options such as Overlay, Animation, Opacity, Blending Options, Padding, Radius, Borders, Border style.

<figure><img src="https://lh5.googleusercontent.com/i1PIOW0gZ8E_sApIprhFmgbTWeethWRoIt4kGMMR9G7Wg-FjG05FgQqcVUhxmjNMOesGa0C6flCUr0IkGrZ2LKVkmtRKJCw2KtStKfa0bqoRa8ghQmkRlFgBnme5b1UpYWRdDDTcnrJB_fZBrKvSxiIIl649oP6GYrJIZyCjEHSr6sSvo4SdqqeDE74PtQ" alt=""><figcaption></figcaption></figure>

## Colors

The Overlay property adds a layer to the images in your gallery.

Background Colour adds a colour or gradient to your Image or `gallery` block.

![](https://lh5.googleusercontent.com/gAnh9oYkZCwpcG1FXUz7OjQa75ngQcqdVWRI9Nb71OTQ93bhtqiSI8PGxCB1DVS4Gma9rlY1ZJdjKOpcsSQMQ2-l82SxzccQhwPofxFUkQmrZ545RcxzPK0JO_0b8zDOpap5OUjjiDQOd4GuVYegp4eXoG-7QATPSOgoYYQymCtxO8XWo93wY3ljiDOfLA)

<details>

<summary>Add background colour</summary>

1. Select the `gallery` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open the Image Style tab
5. Select Background Color or Gradient

</details>

{% content-ref url="../../design/backgrounds" %}
[backgrounds](https://docs.cwicly.com/design/backgrounds)
{% endcontent-ref %}

## Padding

The Padding property allows you to specify the space that separates the Gallery Image block from its border on all sides.

{% hint style="danger" %}
Padding is not to be confused with Margin. The first adds space inside the element, the other adds space outside it.
{% endhint %}

![](https://lh4.googleusercontent.com/mxHRqfNEMkSG47OzgJyJxYg1qMu0ORnL_W_sxc50o-1f6URwUdgkUuWChl2Phz1NvYPS8xSpqbu0b84Ex_ga7hPzCsy4WqbLh7SNfYiQ4SEbO-5RXWCSgB1ouqixdkLxtQXazuUpK-79Ph2jJ_rrDjLjwrIN6tuxoN0PFMywQmVp-ECq9Ym1JwDmaz08zQ)

<details>

<summary>Add padding</summary>

1. Select a `gallery` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open Image Style tab
5. Navigate to Padding
6. Link or Unlink Padding to add space to one or all sides

</details>

<details>

<summary>Remove padding</summary>

1. Select a `gallery` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open Image Style tab
5. Navigate to Padding
6. Click dot to reset all linked or selected unlinked padding

</details>

## Border

Adds chosen border styling to the gallery block's images.

![](https://lh3.googleusercontent.com/Jv0034obzVzm7TgT133s5DFLFlChtrrhZ2p5V51I_KNZ-Y89FoVqmkak6bnUm84YH6oyRZEzH7ujkClJFlGgBoG3kNTZX8bis4FfIfCPn43KkvdHolCJ_lkisvuiny69A40fJ__nYOsS-ua_8vlFj9l7DJ6RNfTnfxhdcVci_vq-VvKoBJgXzB9aM9qXqA)

{% content-ref url="../../design/borders" %}
[borders](https://docs.cwicly.com/design/borders)
{% endcontent-ref %}

## Animations

The Animations property adds a pre-set animation to your gallery on hover to make your gallery more interesting. Included are Mist, Spring, Sunrise, Blurry.

![](https://lh3.googleusercontent.com/HxsGmPuG6clLbI7qz15TSsmA9XVjDyCynp3gBYOprFl-wBAsGa86C0FL0_f7ZXr3GN1q02WIV4SxiGuq79xONU82jtvDfgAzTj_Ll_7Fh9xMIiQoBEYT1A2Vn4lL8VkU00PwD_iupRQwnUC9KKxEYndK-EuHW4dO62e0xWMW7q9fUi6uP99xcRzynwfbdQ)

<details>

<summary>Add animation</summary>

1. Select a `gallery` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open the Image Style tab
5. Select desired animation in the Animation panel

</details>

<details>

<summary>Remove animation</summary>

1. Select a `gallery` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open the Image Style tab
5. Select *None* in the Animation panel

</details>

## Visual

The Opacity property lets you specify the amount of opacity or transparency to apply to your Image blocks.

![](https://lh5.googleusercontent.com/nHkEEFokQBUSg5_X-hKsModZ6PTpydjJ-KbZuoT87bIy_cbnJveUmDO5yntBMo7DLEqmA9Jvrl7Al-o3hGDdoN0qKCETg7H-kD-iWGtc8m2swC_AKDz4yrdxI4PCePu6MpvnKuxpwYhonPBPtNS8nZjTQ4JvKookis-YXTJbI38zEVM4_7_I5aBnyf1yvg)

<details>

<summary>Adjust opacity</summary>

1. Select a `gallery` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open the Image Style tab
5. Adjust Opacity in the Visual tab

</details>

<details>

<summary>Reset opacity</summary>

1. Select a `gallery` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open the Image Style tab
5. Click blue indicator button to reset Opacity

</details>

The Blend Modes property defines how the `gallery` or `image` block should blend with the background.

<details>

<summary>Modify blend mode</summary>

1. Select a `gallery` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open the Image Style tab
5. Select Blend Mode

</details>

## Filters

The Filter property adds an effect to your Gallery Images. These include: Blur, Brightness, Contrast, Grayscale, Hue-Rotate, Invert, Saturate and Sepia.

![](https://lh3.googleusercontent.com/TrbE0d_w2hnpVPMRIBy8fnlM2Pr8CGdtRdnMIk8nX5e8VXHWK07BA-sea-TxR00CGju_-_l6BtXJvOSBabSUYsjD4Cmlc6Jt1btALELg0pvldV-9WEXhXgNKJh5jaABtqiKyLZFyM6rlAriUVo1XKetHGCbluHs-aCKVXjrn0SMSeyE6OFH4wQjW-EpBeQ)

<details>

<summary>Add filter</summary>

1. Select a `gallery` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open the Image Style tab
5. Navigate to the Filters tab
6. Modify selected Filter effect

</details>