> For the complete documentation index, see [llms.txt](https://docs.cwicly.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cwicly.com/blocks/gallery/image-style.md).
# 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.
## 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.
Add background colour
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
{% content-ref url="/pages/-MS3E6uz2Lt9WaPRFnCI" %}
[Background](/design/backgrounds.md)
{% 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 %}
Add padding
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
Remove padding
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
## Border
Adds chosen border styling to the gallery block's images.
{% content-ref url="/pages/-MS3EJxGwz5H7EVdOkqG" %}
[Borders](/design/borders.md)
{% 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.
Add animation
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
Remove animation
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
## Visual
The Opacity property lets you specify the amount of opacity or transparency to apply to your Image blocks.
Adjust opacity
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
Reset opacity
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
The Blend Modes property defines how the `gallery` or `image` block should blend with the background.
Modify blend mode
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
## Filters
The Filter property adds an effect to your Gallery Images. These include: Blur, Brightness, Contrast, Grayscale, Hue-Rotate, Invert, Saturate and Sepia.
Add filter
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
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.cwicly.com/blocks/gallery/image-style.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
