Cyber Week Sale Extended! Get a Flat 50% Discount on Everything, Coupon: TLBF23

Learn More
X

How To Use Image Hover Effect Widget Of Enter Addons

Image Hover Effect widget will allow you to display an animation that triggers when a user hovers over an element on the page. It can be applied combined to create unlimited effect variations.You can easily build this widget with Enter Addons.

Using Image Hover Effect Widget :

You can see the below video to get an insight into how you can use the Image Hover Effect Widget, Or you can follow the documentation whichever you find convenient.

Step1

Firstly, select the Image Hover Effect Widget from the menu bar on the left-hand side of your screen and drag and drop it in the selected area.

Secondly, from ‘Content‘ Tab you will get Content, Effect Settings and Ribbon section respectively

Then, from ‘Effect Settings‘ Tab you can select ‘Animation Type’ i.e fade, slide-up and slide-down respectively, that is shown below

After that, from ‘Ribbon‘ section you can ‘Show Ribbon’ clicking with switcher ( hide / show ) option.

Step2

From Style section you can find Wrapper Style, Image Style, Title, Description, Button and Icon respectively.

Then From Wrapper Style section you can edit content-horizontal-alignment, content-vertical-alignment, wrapper-width, wrapper-height, margin, padding, border-type, border-radius, box-shadow and background-type.

Moreover, from this section, you can find ‘HOVER’ view also.

After that From Image Style section you can edit image-width, image-height, margin, padding, border-type, border-radius, box-shadow and background-type.

Then From Title section you can edit title-color, margin and padding respectively.

After that From Description section you can edit title-color, typography, margin and padding respectively.

Then From Button section you can edit title-color, button-margin, button-padding, width, border-radius, box-shadow and background-type respectively.

Moreover, from this section, you can find ‘HOVER’ view also.

Then From Icon section you can edit icon-color, icon-size and icon-margin respectively.

Moreover, from this section, you can find ‘HOVER’ view also.

Final Step

Finally, after finishing all the editing, click update, and then click on ‘Preview > Preview in new tab’ to see your work live. And that works like below.

That’s all.