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
Right: Hover effect "twt-cms-image-hover-grayscale"
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".