Embellishing images in CMS blocks with hover effects
In this tutorial you will learn how to embellish 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.
Tip: Application examples you will find in our demoshops.
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 |
|---|---|---|
twt-custom-cms-image-hover-1 bzw. twt-cms-image-hover-opacity | Block | Reduces the opacity for images with a link (hover effect). |
twt-custom-cms-image-hover-2 bzw. twt-cms-image-hover-zoom-in bzw. twt-cms-image-hover-zoom | Block | Enlarges images with a link (hover effect). |
twt-cms-image-hover-3 bzw. twt-cms-image-hover-zoom-out | Block | Reduces images with a link (hover effect). |
twt-cms-image-hover-4 bzw. twt-cms-image-hover-gray-scale bzw. twt-cms-image-hover-grayscale-out | Block | Colors gray images with a link (hover effect). |
twt-cms-image-hover-5 bzw. twt-cms-image-hover-grayscale-in bzw. twt-cms-image-hover-grayscale | Block | Grays out images with a link (hover effect). |
twt-cms-image-hover-6 bzw. twt-cms-image-hover-shine | Block | A highlight leads over images with a link (hover effect). |
twt-cms-image-hover-7 bzw. twt-cms-image-hover-flash | Block | Flashes images with a link (hover effect). |
twt-cms-image-hover-8 bzw. twt-cms-image-hover-rotate-left | Block | Rotates images with a link (hover effect). |
twt-cms-image-hover-9 bzw. twt-cms-image-hover-rotate-right | Block | Rotates images with a link (hover effect). |
twt-cms-image-hover-10 bzw. twt-cms-image-hover-rotate-out bzw. twt-cms-image-hover-rotate | Block | Rotates images with a link (hover effect). |
twt-cms-image-hover-11 bzw. twt-cms-image-hover-blur-in bzw. twt-cms-image-hover-blur | Block | Rotates images with a link (hover effect). |
twt-cms-image-hover-12 bzw. twt-cms-image-hover-blur-out | Block | Rotates images with a link (hover effect). |
Note: How to insert the CSS classes you will learn in our article ThemeWare® CSS classes for Shopping Experiences.
Example
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".
Last updated
