Image Hover Effects For WPBakery Page Builder Pro adds CSS3 hover effects and caption controls to image shows built with WPBakery Page Builder. Use the element for products, portfolios, testimonials, team members, or other image-based content. It appears in the WPBakery interface under the “by labibahmed” tab.

Choose an effect and caption style

Choose from 40+ hover effects, then set the transition direction: left to right, right to left, top to bottom, or bottom to top. Upload images from the WordPress media library and add a caption heading and description. Caption text, heading, and description colors can be adjusted, along with heading and caption background colors. A background image can also be used for the caption.

Adjust the image area

Set custom width and height for the image area, choose caption font sizes, and define a border width and color. You can also show a title over the image. Responsive image hover components are supported, with sizing and styling controls available to fit the surrounding layout.

Reveal a second image on hover

The Pro version can show a second image when a user hovers over the first. Set the Background Type option to “background image” and use that background image as the second image. This configuration is useful when an item needs an alternate view within the same display.

Add the element in WPBakery

Choose an image from the media library, add the Image Hover Effects element in WPBakery, and select an effect. Add a caption heading and description, then adjust the dimensions, colors, backgrounds, border, and transition direction. For an image-over-image display, configure the background image as the second image and preview it within the page layout.

Installation and access

WPBakery Page Builder is required. Install and activate WPBakery Page Builder and the extension in WordPress, then add “Image Hover Effects” to a page or post from the WPBakery content section. The element is under the “by labibahmed” tab. If the tab is not visible, use the dots at the corner of the element section to locate it.