How to Add Rollover Image Effect in WordPress (Step-by-Step Guide)

Install Unlimited Elements Blocks Library

• Go to the Unlimited Elements plugin page on WordPress.org.

• Click Download, then in your WordPress dashboard, go to Plugins → Add New → Upload Plugin and upload the ZIP file.

• Click Install Now and then Activate to enable the plugin.

Open the Blocks Library

• From your WordPress dashboard, go to Unlimited Elements → Blocks Library.

• This is where all available blocks are listed and managed.

Search for the Rollover Image Effect Block

• Use the search bar at the top right and type “Rollover Image Effect”.

• The Rollover Image Effect block will appear in the results list.

Install the Rollover Image Effect Block

• Hover over the Rollover Image Effect block and click Install.

• This adds the block to your available options in the editor.

Add Rollover Image Effect to a WordPress Page

• Open any page or post using the WordPress block editor.

• Click the (+) Add Block button, search for “Rollover Image Effect”, and insert it into the page.

Customize the Rollover Image Effect Block

Once added, select the Rollover Image Effect Block and use the settings panel on the right. Adjust the Image One and Image Two sources to define the default and hover visuals, choose the Transition Length for a seamless swap, and control the visibility of optional Title and Description overlays. Customize the Styling for the Image Container, Border Radius, and Hover Effects to create a dynamic, visually appealing element that fits your site’s design.