***
.before-after-hover{position:relative;width:100%;overflow:hidden;cursor:pointer}.before-after-hover img{display:block;width:100%;height:auto}.before-after-hover .before-image{position:relative;z-index:1}.before-after-hover .after-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:2;transition:opacity 0.5s ease}.before-after-hover:hover .after-image{opacity:1}Result
Normal:BEFORE IMAGE
Mouse over:BEFORE → AFTER
with a smooth fade.
Add labels
If you want the images to say BEFORE REMODEL and AFTER REMODEL,use this version:BEFORE REMODELAFTER REMODEL.before-after-hover{position:relative;overflow:hidden;width:100%;cursor:pointer}.before-after-hover img{display:block;width:100%;height:auto}.before-after-hover .before-image{position:relative;z-index:1}.before-after-hover .after-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:2;transition:opacity .5s ease}.before-after-hover:hover .after-image{opacity:1}.before-label,.after-label{position:absolute;left:20px;bottom:20px;z-index:3;padding:8px 14px;color:#fff;background:rgba(0,0,0,.65);font-size:13px;font-weight:700;letter-spacing:1px}.after-label{opacity:0;transition:opacity .5s ease}.before-after-hover:hover .before-label{opacity:0}.before-after-hover:hover .after-label{opacity:1}***
.overlay-image{position:relative}.overlay-headline{position:absolute;top:15%;left:50%;transform:translate(-50%,-50%);width:90%;text-align:center;z-index:10;color:#fff;pointer-events:none}#main-header{border-bottom:none!important;box-shadow:none!important}#main-header,#main-header.et-fixed-header{min-height:110px!important}#main-header #et-top-navigation,#main-header.et-fixed-header #et-top-navigation{padding-top:35px!important;padding-bottom:35px!important}#main-header #top-menu>li>a,#main-header.et-fixed-header #top-menu>li>a{font-size:16px!important;line-height:1.2em!important;padding-top:0!important;padding-bottom:0!important}#logo,.et-fixed-header #logo{max-height:100px!important;width:auto!important;transition:none!important}#main-header,#logo,#top-menu li a{transition:none!important}***
.pa-image-gallery-16-9 .et_pb_gallery_item img{position:absolute;height:100%;width:100%;top:0;left:0;right:0;bottom:0;object-fit:cover}.cta_button a{margin-right:70px;margin-left:70px;padding:10px!important;padding-right:20px!important;padding-left:20px!important;color:#fff!important;box-shadow:2px 4px 4px 0px rgba(0,0,0,0.6);border-radius:7px;border:#ef6e53;border-style:solid;border-width:1px;background:linear-gradient(to bottom,#ef6e53 0%,#ef6e53 50%,#c7472e 100%);text-shadow:1px 1px black}.ds-custom-link a{padding:7px!important;background:#c7472e;color:#fff!important;border:0px solid #000;border-radius:6px}.ds-custom-link a:hover{background:#fff;color:#000!important;opacity:1!important}@media only screen and (min-width:981px){.nav li ul{width:fit-content;display:flex;flex-direction:column}.nav li li{white-space:nowrap}.nav li li a{width:auto!important}}.pa-button-over-image>.et_pb_button_module_wrapper{position:absolute;top:45%;left:50%;transform:translate(-50%,-45%);z-index:10;opacity:0}.pa-button-over-image>.et_pb_image .et_pb_image_wrap:before{content:"";position:absolute;width:100%;height:100%;background-color:#000000;z-index:9;opacity:0}.pa-button-over-image:hover>.et_pb_button_module_wrapper{opacity:1}.pa-button-over-image:hover>.et_pb_image .et_pb_image_wrap:before{opacity:.3}.pa-text-over-image>.et_pb_text{position:absolute;top:85%;left:50%;transform:translate(-50%,-45%);z-index:10;width:100%}