Adding a Hover Effect
Adding a Hover Effect
ACTIONS & ANIMATIONS
Adding Links
Adding Anchor Points
Hover Effects
Pop ups
Fade-In Effects
Parallax Scrolling
Animated Graphs
Animated Timelines
Gated Content
< BACK TO OVERVIEW
In Readz, you can easily add HOVER effects on your content.
First, select the element on which you want to add a hover effect. This can be a media element (images), a text element, or any box element really.
Hover is only available on the STYLING panels. You can find these on the left toolbar - there is a text styling panel and a general styling panel.
On the top of these styling panels, you will see a menu that is titled 'STATE'.
In this menu, you can select the 'Hover' option. Select 'Hover'.
Any change you make in the styling panel when the 'Hover' box is active/white, will have an effect on that element when readers hover over it.
For example, the box below will change to a red color when you hover over it.
The image below shows how you do that. 'Hover' is selected, and then you simply define how you want the 'hover' state to look like. In this case, the background fill color is set to red.
The element you are editing will reflect the changes you are making. To see how the element looks like in 'default' state, you can select the 'default' state again.
Another frequently used effect for images is to add a gradient layer on hover. To achieve this, you do exactly the same as above, but you decrease the opacity of the layer:
And below are the settings you would apply to achieve this:
Changing the duration of the hover transition
You can change the duration of the hover transition. Just enter the desired value in the box shown below.
Design Tip:
You can make hover effects part of your styles. This way, you can easily create cool text and other styles to re-use across your publication.
Contact Support
STAY IN THE LOOP
Sign up for product updates