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

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".