The image hover effect gives a user all choices and facilities to customize an image with an interesting modern look. For example, you can design an image gallery, portfolio, image slider, and so on. ElementsKit image hover effect is a handy widget with many customization options.
The widget is fast and flexible to design your images. Let’s start its working process-
How to Add Image Hover Effect in WordPress #
Navigate to: Your Dashboard -> Click any old post/page or create New one -> Edit with Elementskit -> Search Image Hover Effect Widget
Content Section #
You will find two editing options here, Image Hover Style and Content Animation. Let’s see what Image Hover Style contains-
- Background Effect- You can choose an effect for the image from different choices like Blend, Fade, Splash, Zoom, etc.
See the GIF below,
- Choose Image- Upload an image here.
- Image Size- There are size options like Medium 300*300, Full, Custom, and others for the image.
- Content Title- Write a title for your image
- Show Title on Hover?- Use the toggle command according to your demand.
- Description- Write a description you want to display on the image.
- Show Description on Hover?- Use the toggle command for description according to your demand.
- Text Style- There are styles to show text named, Diagonal, Right to Left, Left to Right, if you want, you can set None.
- Use Button? or Image Link URL– If you set a Text Style as None, you can use a button and put a link. Again, there is also an option to put a link in the Image Link URL field.
- Content Alignment- Adjust the content alignment using this option.
Content Animation have some other animation styles-
- Entrance Animation- You will find various animation choices for content entrance.
- Title Animation Duration (Second)- Set how many seconds you want to show the title animation.
- Description Animation Duration (Second)- This option is for setting seconds for description animation.
- Button Animation Duration (Second)- If you have used a button, choose the time for the button animation here.
- Use Animation Count Infinite- If you set it ‘YES,’ it will show the infinite animation time option. However, you will see this option only for a few Hover animations.
Style #
- Title- This option is to customize the Title. The options are- Title Typography, Focused Title Typography, Title Color, Focused Title Color, Margin.
- Description- Description Typography, Color, Margin Between.
- Background Overlay- Here, you can find Background Type to select Color, Color Location, Angle, etc.
- Border- Adjust Border Width here.
- Button- You will get all button designing options like- Text Color, Padding, Box Shadow, and others.
After you have done all the necessary customization, click Update or Publish. Here is our final Image Hover Effect-
Isn’t it the easiest widget to work with? You can achieve beautiful results with little effort. Try the widget today and have a smooth experience in designing your website images.
