2fox4oliver

<p>Von Oliver Deppe von <a href="https://www.2fox4.de/wordpress-plugins/" rel="nofollow ugc">2FOX4</a>.</p>
<p><strong>2FOX4 Before After</strong> lets you create beautiful, interactive image comparisons with a draggable slider. Perfect for showcasing transformations, renovations, photo edits, and any kind of visual before/after comparison.</p>
<h4>Features</h4>
<ul>
<li><strong>Three ways to use:</strong> Gutenberg Block, Shortcode, and Elementor Widget</li>
<li><strong>Two comparison modes:</strong> “Slider” (images move with the divider) or “Reveal” (both images stay fixed, divider reveals one over the other)</li>
<li><strong>Horizontal & Vertical mode:</strong> Choose the slider orientation that fits your layout</li>
<li><strong>Adjustable start position:</strong> Set where the divider appears on load (0–100%)</li>
<li><strong>Custom labels:</strong> Add “Before” and “After” text overlays (or any custom text)</li>
<li><strong>Divider color:</strong> Pick any color for the divider line and handle</li>
<li><strong>Hover mode:</strong> Slider follows the mouse cursor instead of requiring a drag</li>
<li><strong>Touch support:</strong> Works perfectly on mobile devices with touch gestures</li>
<li><strong>Loading animation:</strong> Smooth entrance animation when the slider appears</li>
<li><strong>Custom CSS class:</strong> Add your own class for additional styling</li>
<li><strong>Keyboard accessible:</strong> Navigate the slider with arrow keys</li>
<li><strong>Lightweight:</strong> No jQuery dependency on the frontend, pure vanilla JavaScript</li>
</ul>
<h4>Shortcode Usage</h4>
<pre><code>[bfas_before_after_slider before="URL" after="URL"]
</code></pre>
<p>Full example with all options:</p>
<pre><code>[bfas_before_after_slider before="https://example.com/before.jpg" after="https://example.com/after.jpg" start="30" mode="reveal" orientation="horizontal" label_before="Before" label_after="After" divider_color="#ffffff" hover="0" animate="1" css_class="my-class"]
</code></pre>
<h4>Shortcode Parameters</h4>
<ul>
<li><strong>before</strong> (required) — URL of the before image</li>
<li><strong>after</strong> (required) — URL of the after image</li>
<li><strong>start</strong> — Start position in percent (default: 50)</li>
<li><strong>mode</strong> — “slider” or “reveal” (default: slider). In reveal mode, both images stay fixed and the divider reveals one over the other.</li>
<li><strong>orientation</strong> — “horizontal” or “vertical” (default: horizontal)</li>
<li><strong>label_before</strong> — Text label for the before side</li>
<li><strong>label_after</strong> — Text label for the after side</li>
<li><strong>divider_color</strong> — Hex color for the divider (default: #ffffff)</li>
<li><strong>hover</strong> — Set to “1” to enable hover mode (default: 0)</li>
<li><strong>animate</strong> — Set to “1” for entrance animation (default: 0)</li>
<li><strong>css_class</strong> — Custom CSS class for the container</li>
</ul>
<h3>External services</h3>
<p>This plugin includes a voluntary donation link that points to PayPal (paypal.com). The link is displayed inside an admin notice (“Buy me a coffee”) and does not transmit any data automatically. No connection to PayPal is made unless the site administrator clicks the link themselves.</p>
<ul>
<li>Service provider: PayPal (Europe) S.à r.l. et Cie, S.C.A.</li>
<li><a href="https://www.paypal.com/de/webapps/mpp/ua/useragreement-full" rel="nofollow ugc">PayPal Terms of Service</a></li>
<li><a href="https://www.paypal.com/de/webapps/mpp/ua/privacy-full" rel="nofollow ugc">PayPal Privacy Policy</a></li>
</ul>


2FOX4 Before After

Compare two images with an interactive before/after slider. Supports Gutenberg, Shortcode and Elementor.

Zayed Baloch

Hammal Albulushi

Naeem Noor

<p>Twenty20 is a professional-grade image comparison tool that helps you showcase transformations in a highly engaging way. Perfect for:</p>
<ul>
<li>Photography portfolios</li>
<li>Real estate before/after</li>
<li>Renovation projects</li>
<li>Design makeovers</li>
<li>Product comparisons</li>
<li>Restoration work</li>
<li>Medical procedures</li>
<li>And much more!</li>
</ul>
<h4>Video Tutorial</h4>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/1cQ9rhL-t70?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<h4>Live Demo</h4>
<p>Check the <a href="https://zayedbaloch.com/twenty20-image-before-after-wordpress-plugin/" title="Twenty20 Live demo" rel="nofollow ugc">Live Demo</a>.</p>
<h4>Key Features</h4>
<ul>
<li>Responsive design – works perfectly on all devices</li>
<li>Horizontal and vertical sliding options</li>
<li>Customizable slider position and orientation</li>
<li>Custom “before” and “after” labels</li>
<li>Adjustable image widths and alignments</li>
<li>Mouse hover sliding effect</li>
<li>Touch-enabled for mobile devices</li>
<li>Multiple sliders per page</li>
<li>Widget support for sidebars</li>
<li>SEO-friendly with proper alt tag support</li>
<li>Accessibility compliant image comparisons</li>
</ul>
<h4>Page Builder Support</h4>
<ul>
<li>Elementor</li>
<li>WPBakery Page Builder (Visual Composer)</li>
<li>Flatsome UX Builder</li>
<li>Classic Editor</li>
</ul>
<h4>Perfect For</h4>
<ul>
<li>Photography before/after edits</li>
<li>Home renovation comparisons</li>
<li>Web design makeovers</li>
<li>Product transformations</li>
<li>Restoration projects</li>
<li>Beauty transformations</li>
<li>Real estate renovations</li>
</ul>
<h3>Usage</h3>
<h4>Shortcode Example</h4>
<p><strong>Quick Example</strong></p>
<pre><code>[twenty20 img1="" img2="" direction="vertical" offset="0.5" align="right" width="60%" before="Before" after="After" hover="true"]
</code></pre>
<p><strong>Shortcode Parameters</strong></p>
<ul>
<li><code>img1</code> – image ID.</li>
<li><code>img2</code> – image ID.</li>
<li><code>offset</code> – range from 0.1 to 1.0.</li>
<li><code>direction</code> – <code>horizontal|vertical</code>.</li>
<li><code>align</code> – <code>none|right|left</code>.</li>
<li><code>width</code> – supports both <code>px</code> and <code>%</code>.</li>
<li><code>before</code> – text for the “before” label.</li>
<li><code>after</code> – text for the “after” label.</li>
<li><code>hover</code> – <code>true</code> or <code>false</code>.</li>
</ul>


Twenty20 Image Before-After

Simple and clear implementation of the Twenty Twenty by Zurb script.  Thanks for saving me a few hours.

Works Well

Professional before & after image comparison slider for WordPress. Create engaging visual comparisons with an intuitive drag & drop interface.

2FOX4 Before After vs Twenty20 Image Before-After