Introduction
Compare two stacked images by dragging a slider back and forth with the image compare shortcode. Quickly see the difference between images. Great for showing before and after photos.
There are several options including: setting the before and after text, disabling the overlay which shows when the mouse is over, adding a shadow, setting the border radius, and more.
Example
A basic example with the before and after text being set.
In this example the overlay is disabled, a shadow is added, and the corners have been rounded by setting the border radius. The slider starting position has also been set to 20% instead of the default 50%.
You can also choose to compare vertically.
Follow the mouse as it moves and hide the handle.
Compare the photos side-by-side.
Compare the photos over-and-under.
Explore More Shortcodes
- Alert
- Animated Popular
- Animated Image
- Animated Scroll New
- Audio
- Badge
- Blockquote
- Blog
- Blur New
- Books
- Button
- Chart
- Clients
- Code
- Collapsibles
- Content Box
- Content Section Popular
- Counter
- Coupons
- Custom Post Type
- Definitions
- Device Mockups
- Divider Popular
- Dropcap
- Emphasis
- Events
- FAQ
- Filler
- Flip Box Popular
- Fullscreen Video
- Gallery Popular
- Google Docs Viewer
- Guests
- Heading
- Highlight
- Hover Box
- Horizontal Ruler
- Icon Popular
- Icon List
- If New
- Image
- Image Compare
- Jobs
- Label
- Lead
- Lightbox
- Locations
- Map
- Masonry
- Members
- Menu
- Post Meta Data
- Movies
- Music
- News
- Overlay Popular
- Panel New
- Parallax Scene Popular
- Permalink
- Person
- Popover
- Portfolio
- Post Fields
- Post Media
- Pricing Table
- Progress
- Project
- Promotional Box
- QR Code
- Quotes
- Recent Books
- Recent Clients
- Recent Coupons
- Recent Events
- Recent Jobs
- Recent Locations
- Recent Movies
- Recent Music
- Recent News
- Recent Portfolios
- Recent Posts
- Recent Projects
- Recent Quotes
- Recent Recipes
[intense_content_section]
<h2>Introduction</h2>
Compare two stacked images by dragging a slider back and forth with the image compare shortcode. Quickly see the difference between images. Great for showing before and after photos.
There are several options including: setting the before and after text, disabling the overlay which shows when the mouse is over, adding a shadow, setting the border radius, and more.
[/intense_content_section]
[intense_content_section background_type="color" background_color="#f9f9f9" border_top="1px solid #ededed" border_bottom="1px solid #ededed"]
<h2>Example</h2>
A basic example with the before and after text being set.
<center>
[intense_image_compare image1="1909" image2="1910" size="postWide" before_text="Before" after_text="After"]
</center>
In this example the overlay is disabled, a shadow is added, and the corners have been rounded by setting the border radius. The slider starting position has also been set to 20% instead of the default 50%.
<center>[intense_image_compare image1="778" image2="779" size="postWide" slider_offset="20" show_overlay="0" shadow="3" border_radius="5px"]
</center>
You can also choose to compare vertically.
<center>[intense_image_compare image1="2372" image2="2371" size="postWide" mode="vertical"]
</center>
Follow the mouse as it moves and hide the handle.
<center>[intense_image_compare image1="1909" image2="2371" size="postWide" follow_mouse="1" show_handle="0" before_text="Before" after_text="After"]
</center>
Compare the photos side-by-side.
[intense_image_compare image2="1909" image1="2371" size="medium640" mode="side_by_side" slider_offset="20" show_overlay="0" shadow="3" border_radius="5px"]
Compare the photos over-and-under.
[intense_image_compare image2="1909" image1="2371" size="postExtraWide" mode="over_and_under" slider_offset="20" show_overlay="0" shadow="3" border_radius="5px"]
[/intense_content_section]
[intense_snippet snippet_id="Child Theme | Shortcodes/footer" snippet_title="Shortcode Page Footer"]