# 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](https://knowledge.themeware.design/knowledge-base/tutorials/shopping-experiences/themeware-css-classes-for-shopping-experiences "mention").
{% endhint %}

**Example**

<figure><img src="https://1979975522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F178YilsPBIFHBAxTvcMo%2Fuploads%2FdBnVFOFm9gjmIIpqwB7t%2Fimage.png?alt=media&#x26;token=d30ee098-9366-49b0-ae63-f82e60f6a00b" 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 %}