Before and after comparison - Sherlock Photography
Show off your post-processing/retouching ability by adding a "before-and-after" comparison of your editing skills to your page!

Installation

Add an HTML block to the page and add this HTML code to it:
Add this CSS to the block's CSS tab, or to your theme's CSS:
In the HTML, just replace the two links to the images to your own photos! Here's what the finished result looks like. Swipe from left to right to reveal the "before" image.
image
image
image
image

Tweaks

Do you want to start off by showing the entire After image? Add this CSS to the bottom:
Or you can show the entire Before image instead by adding this CSS:
ActionActionAltAdjustAlertAlert2AngleBracketDownAngleBracketLeftAngleBracketLeftSlimAngleBracketRightAngleBracketRightSlimAngleBracketUpic AspectRectable 18dpic AspectSquare 18dpBrowserCalendarCameraPhotoCameraPhoto2CameraVideo2CartCart2CartAddCartAdd2CheckmarkCommentComment2CreditCardCropDesktopDownloadDownload2EditEdit2EmailEmail2FlagFlag2FolderFolder2FolderOpenFullScreenGalleryGallery2GearHeartHeartOutlinedHelpHelpEncircledHideHistoryHistory2HomeHome2ImageImage2InfoInfoEncircledInfoEncircled2LaptopLayoutLinkLockLock2MenuMenu2MinusMinusSlimMobileMoreHorizMoreVertPagePage2PausePlayPlusPlusSlimPrinterSearchSearch2ShareSizesStarStarOutlinedSyncTabletTagTrashTrash2UploadUpload2UserUsersVideoCameraViewWarningWrenchXCrossActionActionAltAddAdjustAlertAlert2AmazonAndroidAppleArrowBackArrowNextBrowserCameraPhotoCameraPhoto2CartCart2CartAddCheckCloseCommentComment2CropCursorMoveDesktopDownloadDropboxFacebookFlickrFolderFolder2FullScreenSlimGalleryGallery2GoogleDriveGooglePhotosHelpEncircledHelpEncircled2HistoryHistory2HomeHome2InfoEncircledInfoEncircled2LaptopLayoutLightroomLinkLockLock2MenuMobileMoreHorizMoreVertNavigateBackNavigateNextPaintPausePeoplePeople2PersonPerson2PhoneSavePlayPrinterRemoveSearchSettingsSettings2ShareSharePrivateSizesSmugMugStarStar2TabletTrashTrash2TwitterUploadUpload2Wrench Page 1Page 1 CopyCombined ShapeCombined ShapeCombined ShapeCombined ShapetemplatestemplatesEZprints-98404-landscapeEZprints-98404-portraittemplatestemplatesEZprints-98406-landscapeEZprints-98406-portraitEZprints-98407-landscapeEZprints-98407-portraittemplatestemplatestemplatestemplatesEZprints-98416-landscapeEZprints-98416-portraitEZprints-98417-landscapeEZprints-98417-portraitEZprints-98418-landscapeEZprints-98418-portraitEZprints-98419-landscapeEZprints-98419-portraitshared-style-defs
Powered by SmugMug Log In