{"id":259082,"date":"2024-06-23T14:20:23","date_gmt":"2024-06-23T13:20:23","guid":{"rendered":"https:\/\/brandandbuildtemplates.me\/kadence-cloud\/?p=259082"},"modified":"2026-01-01T18:44:18","modified_gmt":"2026-01-01T18:44:18","slug":"image-swap-2","status":"publish","type":"post","link":"https:\/\/brandandbuildtemplates.me\/kadence-cloud\/image-swap-2\/","title":{"rendered":"Image Swap 2"},"content":{"rendered":"<style>.kb-row-layout-id259082_ff1ed8-e5 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id259082_ff1ed8-e5 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id259082_ff1ed8-e5 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-lg, 4rem);row-gap:var(--global-kb-gap-md, 2rem);max-width:var( --global-content-width, 1290px );padding-left:var(--global-content-edge-padding);padding-right:var(--global-content-edge-padding);padding-top:var(--global-kb-spacing-xl, 4rem);padding-bottom:var(--global-kb-spacing-xl, 4rem);grid-template-columns:minmax(0, calc(50% - ((var(--global-kb-gap-lg, 4rem) * 1 )\/2)))minmax(0, calc(50% - ((var(--global-kb-gap-lg, 4rem) * 1 )\/2)));}.kb-row-layout-id259082_ff1ed8-e5 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id259082_ff1ed8-e5 > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id259082_ff1ed8-e5 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id259082_ff1ed8-e5 alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top kt-inner-column-height-full kb-theme-content-width\">\n<style>.kadence-column259082_feffaa-0f > .kt-inside-inner-col{display:flex;}.kadence-column259082_feffaa-0f > .kt-inside-inner-col,.kadence-column259082_feffaa-0f > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column259082_feffaa-0f > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column259082_feffaa-0f > .kt-inside-inner-col{flex-direction:column;justify-content:flex-start;}.kadence-column259082_feffaa-0f > .kt-inside-inner-col > .aligncenter{width:100%;}.kt-row-column-wrap > .kadence-column259082_feffaa-0f{align-self:flex-start;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column259082_feffaa-0f{align-self:auto;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column259082_feffaa-0f > .kt-inside-inner-col{flex-direction:column;justify-content:flex-start;}.kadence-column259082_feffaa-0f > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column259082_feffaa-0f{position:relative;}@media all and (max-width: 1024px){.kt-row-column-wrap > .kadence-column259082_feffaa-0f{align-self:flex-start;}}@media all and (max-width: 1024px){.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column259082_feffaa-0f{align-self:auto;}}@media all and (max-width: 1024px){.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column259082_feffaa-0f > .kt-inside-inner-col{flex-direction:column;justify-content:flex-start;}}@media all and (max-width: 1024px){.kadence-column259082_feffaa-0f > .kt-inside-inner-col{flex-direction:column;justify-content:flex-start;}}@media all and (max-width: 767px){.kt-row-column-wrap > .kadence-column259082_feffaa-0f{align-self:flex-start;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column259082_feffaa-0f{align-self:auto;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column259082_feffaa-0f > .kt-inside-inner-col{flex-direction:column;justify-content:flex-start;}.kadence-column259082_feffaa-0f > .kt-inside-inner-col{flex-direction:column;justify-content:flex-start;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column259082_feffaa-0f\"><div class=\"kt-inside-inner-col\"><style>.wp-block-kadence-advancedheading.kt-adv-heading259082_0d8981-ed, .wp-block-kadence-advancedheading.kt-adv-heading259082_0d8981-ed[data-kb-block=\"kb-adv-heading259082_0d8981-ed\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading259082_0d8981-ed mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading259082_0d8981-ed[data-kb-block=\"kb-adv-heading259082_0d8981-ed\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading259082_0d8981-ed img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading259082_0d8981-ed[data-kb-block=\"kb-adv-heading259082_0d8981-ed\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h1 class=\"kt-adv-heading259082_0d8981-ed wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading259082_0d8981-ed\">Hover over the images to see the images swap<\/h1>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading259082_4b7cca-76, .wp-block-kadence-advancedheading.kt-adv-heading259082_4b7cca-76[data-kb-block=\"kb-adv-heading259082_4b7cca-76\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading259082_4b7cca-76 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading259082_4b7cca-76[data-kb-block=\"kb-adv-heading259082_4b7cca-76\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading259082_4b7cca-76 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading259082_4b7cca-76[data-kb-block=\"kb-adv-heading259082_4b7cca-76\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading259082_4b7cca-76 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading259082_4b7cca-76\">Pretty cool, eh?<\/h2>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading259082_acd743-61, .wp-block-kadence-advancedheading.kt-adv-heading259082_acd743-61[data-kb-block=\"kb-adv-heading259082_acd743-61\"]{font-size:var(--global-kb-font-size-md, 1.25rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading259082_acd743-61 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading259082_acd743-61[data-kb-block=\"kb-adv-heading259082_acd743-61\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading259082_acd743-61 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading259082_acd743-61[data-kb-block=\"kb-adv-heading259082_acd743-61\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading259082_acd743-61 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading259082_acd743-61\">This effect is created using a combination of CSS and JavaScript. When you hover, the Javascript adds a CSS class to the images&#8217; parent container which triggers the CSS animation. When you mouseout, it removes that class and adds a different one which reverses the effect.<br><br>The images don&#8217;t actually swap, it&#8217;s a trick of the eye. The images move position so that halfway through the animation, they&#8217;re on top of each other. At that point, they swap z-indexes, then move back to their original positions, creating an illusion of sorts.<br><br><\/p>\n<\/div><\/div>\n\n\n<style>.kadence-column259082_0eb458-5b > .kt-inside-inner-col{display:flex;}.kadence-column259082_0eb458-5b > .kt-inside-inner-col,.kadence-column259082_0eb458-5b > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column259082_0eb458-5b > .kt-inside-inner-col{row-gap:var(--global-kb-gap-none, 0rem );column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column259082_0eb458-5b > .kt-inside-inner-col{flex-direction:column;}.kadence-column259082_0eb458-5b > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column259082_0eb458-5b > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column259082_0eb458-5b{position:relative;}@media all and (max-width: 1024px){.kadence-column259082_0eb458-5b > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column259082_0eb458-5b > .kt-inside-inner-col{min-height:400px;flex-direction:column;justify-content:center;}}\/* B&B Image Swap 2 *\/.bb-image-container .bb-back-image,.bb-image-container .bb-front-image {  position: absolute;  opacity: 1;}.bb-image-container .bb-back-image {  top: 0;  right: 30%;  left: 0;  z-index: 1;}.bb-image-container .bb-front-image {  top: 20%;  right: 0;  left: 30%;  z-index: 2;}\/* Forward animation for switch class *\/.bb-image-container.switch .bb-back-image {  animation: switchBackImage 0.3s forwards linear;}.bb-image-container.switch .bb-front-image {  animation: switchFrontImage 0.3s forwards linear;}\/* Reverse animation for reverse class *\/.bb-image-container.reverse .bb-back-image {  animation: reverseBackImage 0.3s forwards linear;}.bb-image-container.reverse .bb-front-image {  animation: reverseFrontImage 0.3s forwards linear;}@keyframes switchBackImage {  0% {    top: 0;    right: 30%;    left: 0;    opacity: 1;    z-index: 1;  }  49.9% {    z-index: 1;  }  50% {    top: 10%;    right: 15%;    left: 15%;    opacity: 0.5;    z-index: 2;  }  100% {    top: 0;    right: 30%;    left: 0;    opacity: 1;    z-index: 2;  }}@keyframes reverseBackImage {  0% {    top: 0;    right: 30%;    left: 0;    opacity: 1;    z-index: 2;  }  49.9% {    z-index: 2;  }  50% {    top: 10%;    right: 15%;    left: 15%;    opacity: 0.5;    z-index: 1;  }  100% {    top: 0;    right: 30%;    left: 0;    opacity: 1;    z-index: 1;  }}@keyframes switchFrontImage {  0% {    top: 20%;    right: 0;    left: 30%;    opacity: 1;    z-index: 2;  }  49.9% {    z-index: 2;  }  50% {    top: 10%;    right: 15%;    left: 15%;    opacity: 0.5;    z-index: 1;  }  100% {    top: 20%;    right: 0;    left: 30%;    opacity: 1;    z-index: 1;  }}@keyframes reverseFrontImage {  0% {    top: 20%;    right: 0;    left: 30%;    opacity: 1;    z-index: 1;  }  49.9% {    z-index: 1;  }  50% {    top: 10%;    right: 15%;    left: 15%;    opacity: 0.5;    z-index: 2;  }  100% {    top: 20%;    right: 0;    left: 30%;    opacity: 1;    z-index: 2;  }}<\/style>\n<div class=\"wp-block-kadence-column kadence-column259082_0eb458-5b bb-image-container\"><div class=\"kt-inside-inner-col\"><style>.wp-block-kadence-image.kb-image259082_4f4240-f9:not(.kb-specificity-added):not(.kb-extra-specificity-added){margin-bottom:0%;}.kb-image259082_4f4240-f9 .kb-image-has-overlay:after{opacity:0.3;border-top-left-radius:20px;border-top-right-radius:20px;border-bottom-right-radius:20px;border-bottom-left-radius:20px;}.kb-image259082_4f4240-f9 img.kb-img, .kb-image259082_4f4240-f9 .kb-img img{border-top-left-radius:20px;border-top-right-radius:20px;border-bottom-right-radius:20px;border-bottom-left-radius:20px;box-shadow:0px 5px 3px 0px rgba(0, 0, 0, 0.2);}<\/style>\n<figure class=\"wp-block-kadence-image kb-image259082_4f4240-f9 kb-image-is-ratio-size bb-back-image\"><div class=\"kb-is-ratio-image kb-image-ratio-square\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"1200\" src=\"https:\/\/brandandbuildtemplates.me\/kadence-cloud\/wp-content\/uploads\/panels-3.jpg\" alt=\"\" class=\"kb-img wp-image-251276\" srcset=\"https:\/\/brandandbuildtemplates.me\/kadence-cloud\/wp-content\/uploads\/panels-3.jpg 1080w, https:\/\/brandandbuildtemplates.me\/kadence-cloud\/wp-content\/uploads\/panels-3-270x300.jpg 270w, https:\/\/brandandbuildtemplates.me\/kadence-cloud\/wp-content\/uploads\/panels-3-922x1024.jpg 922w, https:\/\/brandandbuildtemplates.me\/kadence-cloud\/wp-content\/uploads\/panels-3-768x853.jpg 768w\" sizes=\"auto, (max-width: 1080px) 100vw, 1080px\" \/><\/div><\/figure>\n\n\n<style>.wp-block-kadence-image.kb-image259082_8204db-61:not(.kb-specificity-added):not(.kb-extra-specificity-added){margin-bottom:0%;}.kb-image259082_8204db-61 .kb-image-has-overlay:after{opacity:0.3;border-top-left-radius:20px;border-top-right-radius:20px;border-bottom-right-radius:20px;border-bottom-left-radius:20px;}.kb-image259082_8204db-61 img.kb-img, .kb-image259082_8204db-61 .kb-img img{border-top-left-radius:20px;border-top-right-radius:20px;border-bottom-right-radius:20px;border-bottom-left-radius:20px;box-shadow:0px 5px 3px 0px rgba(0, 0, 0, 0.2);}<\/style>\n<figure class=\"wp-block-kadence-image kb-image259082_8204db-61 kb-image-is-ratio-size bb-front-image\"><div class=\"kb-is-ratio-image kb-image-ratio-square\"><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"1200\" src=\"https:\/\/brandandbuildtemplates.me\/kadence-cloud\/wp-content\/uploads\/panels-1.jpg\" alt=\"\" class=\"kb-img wp-image-251274\" srcset=\"https:\/\/brandandbuildtemplates.me\/kadence-cloud\/wp-content\/uploads\/panels-1.jpg 1080w, https:\/\/brandandbuildtemplates.me\/kadence-cloud\/wp-content\/uploads\/panels-1-270x300.jpg 270w, https:\/\/brandandbuildtemplates.me\/kadence-cloud\/wp-content\/uploads\/panels-1-922x1024.jpg 922w, https:\/\/brandandbuildtemplates.me\/kadence-cloud\/wp-content\/uploads\/panels-1-768x853.jpg 768w\" sizes=\"auto, (max-width: 1080px) 100vw, 1080px\" \/><\/div><\/figure>\n<\/div><\/div>\n\n<\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Hover over the images to see the images swap Pretty cool, eh? This effect is created using a combination of CSS and JavaScript. When you hover, the Javascript adds a CSS class to the images&#8217; parent container which triggers the CSS animation. When you mouseout, it removes that class and adds a different one which&#8230;<\/p>\n","protected":false},"author":1,"featured_media":259627,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"<script>\n  \/\/Image switch animation\ndocument.addEventListener('DOMContentLoaded', function() {\n    const element = document.querySelector('.bb-image-container');\n  \n    \/\/ Add 'switch' class on mouse enter to trigger forward animation\n    element.addEventListener('mouseenter', function() {\n      element.classList.add('switch');\n      element.classList.remove('reverse');\n    });\n  \n    \/\/ Add 'reverse' class on mouse leave to trigger reverse animation\n    element.addEventListener('mouseleave', function() {\n      element.classList.remove('switch');\n      element.classList.add('reverse');\n    });\n  });\n<\/script>","_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[267,83,85,84],"tags":[],"class_list":["post-259082","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-images","category-kadence-free","category-kadence-full-bundle","category-kadence-pro"],"acf":[],"taxonomy_info":{"category":[{"value":267,"label":"Images"},{"value":83,"label":"Kadence Free"},{"value":85,"label":"Kadence Full Bundle"},{"value":84,"label":"Kadence Pro"}]},"featured_image_src_large":["https:\/\/brandandbuildtemplates.me\/kadence-cloud\/wp-content\/uploads\/image-swap-2-1024x576.webp",1024,576,true],"author_info":{"display_name":"Michelle","author_link":"https:\/\/brandandbuildtemplates.me\/kadence-cloud\/author\/hf7wja\/"},"comment_info":0,"category_info":[{"term_id":267,"name":"Images","slug":"images","term_group":0,"term_taxonomy_id":267,"taxonomy":"category","description":"","parent":0,"count":8,"filter":"raw","cat_ID":267,"category_count":8,"category_description":"","cat_name":"Images","category_nicename":"images","category_parent":0},{"term_id":83,"name":"Kadence Free","slug":"kadence-free","term_group":0,"term_taxonomy_id":83,"taxonomy":"category","description":"","parent":0,"count":190,"filter":"raw","cat_ID":83,"category_count":190,"category_description":"","cat_name":"Kadence Free","category_nicename":"kadence-free","category_parent":0},{"term_id":85,"name":"Kadence Full Bundle","slug":"kadence-full-bundle","term_group":0,"term_taxonomy_id":85,"taxonomy":"category","description":"","parent":0,"count":242,"filter":"raw","cat_ID":85,"category_count":242,"category_description":"","cat_name":"Kadence Full Bundle","category_nicename":"kadence-full-bundle","category_parent":0},{"term_id":84,"name":"Kadence Pro","slug":"kadence-pro","term_group":0,"term_taxonomy_id":84,"taxonomy":"category","description":"","parent":0,"count":236,"filter":"raw","cat_ID":84,"category_count":236,"category_description":"","cat_name":"Kadence Pro","category_nicename":"kadence-pro","category_parent":0}],"tag_info":false,"_links":{"self":[{"href":"https:\/\/brandandbuildtemplates.me\/kadence-cloud\/wp-json\/wp\/v2\/posts\/259082","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brandandbuildtemplates.me\/kadence-cloud\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/brandandbuildtemplates.me\/kadence-cloud\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/brandandbuildtemplates.me\/kadence-cloud\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/brandandbuildtemplates.me\/kadence-cloud\/wp-json\/wp\/v2\/comments?post=259082"}],"version-history":[{"count":4,"href":"https:\/\/brandandbuildtemplates.me\/kadence-cloud\/wp-json\/wp\/v2\/posts\/259082\/revisions"}],"predecessor-version":[{"id":259628,"href":"https:\/\/brandandbuildtemplates.me\/kadence-cloud\/wp-json\/wp\/v2\/posts\/259082\/revisions\/259628"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/brandandbuildtemplates.me\/kadence-cloud\/wp-json\/wp\/v2\/media\/259627"}],"wp:attachment":[{"href":"https:\/\/brandandbuildtemplates.me\/kadence-cloud\/wp-json\/wp\/v2\/media?parent=259082"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/brandandbuildtemplates.me\/kadence-cloud\/wp-json\/wp\/v2\/categories?post=259082"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/brandandbuildtemplates.me\/kadence-cloud\/wp-json\/wp\/v2\/tags?post=259082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}