Embellishing images in CMS blocks with hover effects
In this tutorial you will learn how to embellish images in CMS blocks with hover effects.
Last updated
Was this helpful?
In this tutorial you will learn how to embellish images in CMS blocks with hover effects.
Last updated
Was this helpful?
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 .
Status: Classes on this page have been enhanced with ThemeWare® 0.3.4 und 0.5.0.
CSS classes
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).
Example