Interactive image effects for WPBakery
Image Hover Effects For WPBakery Page Builder Pro extends WPBakery Page Builder with configurable CSS3 hover effects for image-based content. It is designed for pages that need more visual interaction around products, portfolios, testimonials, team members, and other image displays. The element is available within the WPBakery interface, under the “by labibahmed” tab.
The Pro edition combines animated hover behavior with caption controls, responsive sizing, and additional image presentation options. You can upload images from the WordPress media library, add a caption heading and description, and adjust the appearance of the text and its background. The effects use CSS3 and support transitions moving from left to right, right to left, top to bottom, or bottom to top.
Pro controls for image presentations
- 40+ hover effects: Choose from a wide range of hover animations for image displays.
- Responsive layouts: Use responsive image hover elements for different screen sizes.
- Custom dimensions: Set the image area’s width and height.
- Typography controls: Adjust custom font sizes for the caption content.
- Caption styling: Change caption, heading, and description colors.
- Background options: Set heading background colors, caption background colors, and a caption background image.
- Border controls: Define a custom border width and border color.
- Title over image: Display a title over the image as part of the hover presentation.
Image-over-image hover displays
The Pro version includes an option to show a second image when visitors hover over the first. To create this presentation, set the Background Type option to background image and use a background image as the second image. This can be useful when a product, portfolio item, or other visual needs an alternate image revealed through interaction.
Practical page-building workflow
Choose an image from the media library, add the Image Hover Effects element in WPBakery, and select a hover effect. Add the caption heading and description, then refine the dimensions, colors, backgrounds, border, and transition direction for the surrounding layout. For an image-over-image display, configure the background image as the second image and preview the result within the page design.
Installation
Image Hover Effects For WPBakery Page Builder Pro requires WPBakery Page Builder. Install and activate the required page builder and this extension in WordPress, then look for the image hover element in the “by labibahmed” tab of the WPBakery element section. If that tab is not immediately visible, use the dots at the corner of the element section to locate it.
