> For the complete documentation index, see [llms.txt](https://knowledge.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/embellishing-images-in-cms-blocks-with-hover-effects.md).

# Embellishing images in CMS blocks with hover effects

With ThemeWare® you receive a wide range of CSS classes enabling you to create various hover effects for images in CMS blocks.

{% hint style="success" %}
**Tip**: Application examples you will find in our [demoshops](https://demo.themeware.design/modern/en/Features/ThemeWare-CMS-styling/Embellishing-images-in-CMS-blocks-with-hover-effects/).
{% endhint %}

***

## ThemeWare® CSS hover effects for images

> **Status**: Classes on this page have been enhanced with ThemeWare® 0.3.4 und 0.5.0.

**CSS classes**

| Class                                                                                                                                                                              | Block/Section | Description                                                |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ---------------------------------------------------------- |
| <p><strong>twt-custom-cms-image-hover-1</strong></p><p>bzw.</p><p><strong>twt-cms-image-hover-opacity</strong></p>                                                                 | Block         | Reduces the opacity for images with a link (hover effect). |
| <p><strong>twt-custom-cms-image-hover-2</strong></p><p>bzw.</p><p><strong>twt-cms-image-hover-zoom-in</strong></p><p>bzw.</p><p><strong>twt-cms-image-hover-zoom</strong></p>      | Block         | Enlarges images with a link (hover effect).                |
| <p><strong>twt-cms-image-hover-3</strong></p><p>bzw.</p><p><strong>twt-cms-image-hover-zoom-out</strong></p>                                                                       | Block         | Reduces images with a link (hover effect).                 |
| <p><strong>twt-cms-image-hover-4</strong></p><p>bzw.</p><p><strong>twt-cms-image-hover-gray-scale</strong></p><p>bzw.</p><p><strong>twt-cms-image-hover-grayscale-out</strong></p> | Block         | Colors gray images with a link (hover effect).             |
| <p><strong>twt-cms-image-hover-5</strong></p><p>bzw.</p><p><strong>twt-cms-image-hover-grayscale-in</strong></p><p>bzw.</p><p><strong>twt-cms-image-hover-grayscale</strong></p>   | Block         | Grays out images with a link (hover effect).               |
| <p><strong>twt-cms-image-hover-6</strong></p><p>bzw.</p><p><strong>twt-cms-image-hover-shine</strong></p>                                                                          | Block         | A highlight leads over images with a link (hover effect).  |
| <p><strong>twt-cms-image-hover-7</strong></p><p>bzw.</p><p><strong>twt-cms-image-hover-flash</strong></p>                                                                          | Block         | Flashes images with a link (hover effect).                 |
| <p><strong>twt-cms-image-hover-8</strong></p><p>bzw.</p><p><strong>twt-cms-image-hover-rotate-left</strong></p>                                                                    | Block         | Rotates images with a link (hover effect).                 |
| <p><strong>twt-cms-image-hover-9</strong></p><p>bzw.</p><p><strong>twt-cms-image-hover-rotate-right</strong></p>                                                                   | Block         | Rotates images with a link (hover effect).                 |
| <p><strong>twt-cms-image-hover-10</strong></p><p>bzw.</p><p><strong>twt-cms-image-hover-rotate-out</strong></p><p>bzw.</p><p><strong>twt-cms-image-hover-rotate</strong></p>       | Block         | Rotates images with a link (hover effect).                 |
| <p><strong>twt-cms-image-hover-11</strong></p><p>bzw.</p><p><strong>twt-cms-image-hover-blur-in</strong></p><p>bzw.</p><p><strong>twt-cms-image-hover-blur</strong></p>            | Block         | Rotates images with a link (hover effect).                 |
| <p><strong>twt-cms-image-hover-12</strong></p><p>bzw.</p><p><strong>twt-cms-image-hover-blur-out</strong></p>                                                                      | Block         | Rotates images with a link (hover effect).                 |

{% hint style="info" %}
**Note**: How to insert the CSS classes you will learn in our article [ThemeWare® CSS classes for Shopping Experiences](/knowledge-base/tutorials/shopping-experiences/themeware-css-classes-for-shopping-experiences.md).
{% endhint %}

**Example**

<figure><img src="/files/N7dUku82wqRmIbke6ccY" alt=""><figcaption><p>Right: Hover effect "twt-cms-image-hover-grayscale"</p></figcaption></figure>

{% hint style="info" %}
**Note**: You can activate or deactivate the ThemeWare® "CSS image hover classes" as required. You can find the configuration in the Tab "Others" => Block "Advanced settings" => Section "Additional CSS classes".
{% endhint %}