Zebre Card Template

template.json

{"content":[{"id":"viygze","name":"section","parent":0,"children":["egnjib"],"settings":[]},{"id":"egnjib","name":"container","parent":"viygze","children":["yonmxz","oqmbbl","uwohbk","rzygds"],"settings":{"taxonomies":["category","post_tag"],"extrasCustomQueryCode":"<style>\nh1.my-heading {\n  color: crimson;\n}\n</style>\n\n<h1 class='my-heading'>Just some custom HTML</h1>","_display":"grid","_gridGap":"3rem","_gridTemplateColumns":"1fr 1fr 1fr"}},{"id":"yonmxz","name":"block","parent":"egnjib","children":["tlcgnn","loidvy","gisipf"],"settings":{"taxonomies":["category","post_tag"],"extrasCustomQueryCode":"<style>\nh1.my-heading {\n  color: crimson;\n}\n</style>\n\n<h1 class='my-heading'>Just some custom HTML</h1>","_cssGlobalClasses":["dvrfvx"]},"label":"Zebre Card"},{"id":"tlcgnn","name":"image","parent":"yonmxz","children":[],"settings":{"tag":"figure","caption":"none","_cssGlobalClasses":["ysiige"],"image":{"id":463,"filename":"iegvy4o3bym.jpg","size":"large","full":"https://bb-card-tutorial.local/wp-content/uploads/2024/05/iegvy4o3bym.jpg","url":"https://bb-card-tutorial.local/wp-content/uploads/2024/05/iegvy4o3bym-768x1024.jpg"}}},{"id":"loidvy","name":"div","parent":"yonmxz","children":[],"settings":{"taxonomies":["category","post_tag"],"extrasCustomQueryCode":"<style>\nh1.my-heading {\n  color: crimson;\n}\n</style>\n\n<h1 class='my-heading'>Just some custom HTML</h1>","_cssGlobalClasses":["picsvu"]},"label":"Overlay"},{"id":"gisipf","name":"div","parent":"yonmxz","children":["svcvol","waddga","ulkkug"],"settings":{"taxonomies":["category","post_tag"],"extrasCustomQueryCode":"<style>\nh1.my-heading {\n  color: crimson;\n}\n</style>\n\n<h1 class='my-heading'>Just some custom HTML</h1>","_cssGlobalClasses":["lvfrat"]},"label":"Content Wrapper"},{"id":"svcvol","name":"text-link","parent":"gisipf","children":[],"settings":{"text":"Paper Crane","_cssGlobalClasses":["toqvsx"],"link":{"type":"external","url":"#"}}},{"id":"waddga","name":"divider","parent":"gisipf","children":[],"settings":{"_cssGlobalClasses":["cvpvzx"]}},{"id":"ulkkug","name":"text-basic","parent":"gisipf","children":[],"settings":{"text":"Branding","tag":"p","_cssGlobalClasses":["hcoqaq"]},"label":"Category"},{"id":"uwohbk","name":"block","parent":"egnjib","children":["xeqvej","wxqdoi","vnrlvh"],"settings":{"taxonomies":["category","post_tag"],"extrasCustomQueryCode":"<style>\nh1.my-heading {\n  color: crimson;\n}\n</style>\n\n<h1 class='my-heading'>Just some custom HTML</h1>","_cssGlobalClasses":["dvrfvx"]},"label":"Zebre Card"},{"id":"xeqvej","name":"image","parent":"uwohbk","children":[],"settings":{"tag":"figure","caption":"none","_cssGlobalClasses":["ysiige"],"image":{"id":63,"filename":"abd813a5-7b4f-35eb-8baa-bd913889505c.jpg","size":"large","full":"https://bb-card-tutorial.local/wp-content/uploads/2024/01/abd813a5-7b4f-35eb-8baa-bd913889505c.jpg","url":"https://bb-card-tutorial.local/wp-content/uploads/2024/01/abd813a5-7b4f-35eb-8baa-bd913889505c-1024x682.jpg"}}},{"id":"wxqdoi","name":"div","parent":"uwohbk","children":[],"settings":{"taxonomies":["category","post_tag"],"extrasCustomQueryCode":"<style>\nh1.my-heading {\n  color: crimson;\n}\n</style>\n\n<h1 class='my-heading'>Just some custom HTML</h1>","_cssGlobalClasses":["picsvu"]},"label":"Overlay"},{"id":"vnrlvh","name":"div","parent":"uwohbk","children":["blgovb","rvvemy","qdcmmm"],"settings":{"taxonomies":["category","post_tag"],"extrasCustomQueryCode":"<style>\nh1.my-heading {\n  color: crimson;\n}\n</style>\n\n<h1 class='my-heading'>Just some custom HTML</h1>","_cssGlobalClasses":["lvfrat"]},"label":"Content Wrapper"},{"id":"blgovb","name":"text-link","parent":"vnrlvh","children":[],"settings":{"text":"Paper Crane","_cssGlobalClasses":["toqvsx"],"link":{"type":"external","url":"#"}}},{"id":"rvvemy","name":"divider","parent":"vnrlvh","children":[],"settings":{"_cssGlobalClasses":["cvpvzx"]}},{"id":"qdcmmm","name":"text-basic","parent":"vnrlvh","children":[],"settings":{"text":"Branding","tag":"p","_cssGlobalClasses":["hcoqaq"]},"label":"Category"},{"id":"oqmbbl","name":"block","parent":"egnjib","children":["shmpcm","vrcqgx","etxzip"],"settings":{"taxonomies":["category","post_tag"],"extrasCustomQueryCode":"<style>\nh1.my-heading {\n  color: crimson;\n}\n</style>\n\n<h1 class='my-heading'>Just some custom HTML</h1>","_cssGlobalClasses":["dvrfvx"]},"label":"Zebre Card"},{"id":"shmpcm","name":"image","parent":"oqmbbl","children":[],"settings":{"tag":"figure","caption":"none","_cssGlobalClasses":["ysiige"],"image":{"id":78,"filename":"31e84766-de25-3e6c-aadd-61b9779984e1.jpg","size":"large","full":"https://bb-card-tutorial.local/wp-content/uploads/2024/01/31e84766-de25-3e6c-aadd-61b9779984e1.jpg","url":"https://bb-card-tutorial.local/wp-content/uploads/2024/01/31e84766-de25-3e6c-aadd-61b9779984e1-1024x682.jpg"}}},{"id":"vrcqgx","name":"div","parent":"oqmbbl","children":[],"settings":{"taxonomies":["category","post_tag"],"extrasCustomQueryCode":"<style>\nh1.my-heading {\n  color: crimson;\n}\n</style>\n\n<h1 class='my-heading'>Just some custom HTML</h1>","_cssGlobalClasses":["picsvu"]},"label":"Overlay"},{"id":"etxzip","name":"div","parent":"oqmbbl","children":["zspqix","gonysh","ndccgw"],"settings":{"taxonomies":["category","post_tag"],"extrasCustomQueryCode":"<style>\nh1.my-heading {\n  color: crimson;\n}\n</style>\n\n<h1 class='my-heading'>Just some custom HTML</h1>","_cssGlobalClasses":["lvfrat"]},"label":"Content Wrapper"},{"id":"zspqix","name":"text-link","parent":"etxzip","children":[],"settings":{"text":"Paper Crane","_cssGlobalClasses":["toqvsx"],"link":{"type":"external","url":"#"}}},{"id":"gonysh","name":"divider","parent":"etxzip","children":[],"settings":{"_cssGlobalClasses":["cvpvzx"]}},{"id":"ndccgw","name":"text-basic","parent":"etxzip","children":[],"settings":{"text":"Branding","tag":"p","_cssGlobalClasses":["hcoqaq"]},"label":"Category"},{"id":"rzygds","name":"block","parent":"egnjib","children":["meddpj","rdpqil","peuvdg"],"settings":{"taxonomies":["category","post_tag"],"extrasCustomQueryCode":"<style>\nh1.my-heading {\n  color: crimson;\n}\n</style>\n\n<h1 class='my-heading'>Just some custom HTML</h1>","_cssGlobalClasses":["dvrfvx"]},"label":"Zebre Card"},{"id":"meddpj","name":"image","parent":"rzygds","children":[],"settings":{"tag":"figure","caption":"none","_cssGlobalClasses":["ysiige"],"image":{"id":33,"filename":"bce3ce47-552c-3155-96c1-4aafb238c2d4.jpg","size":"large","full":"https://bb-card-tutorial.local/wp-content/uploads/2024/01/bce3ce47-552c-3155-96c1-4aafb238c2d4.jpg","url":"https://bb-card-tutorial.local/wp-content/uploads/2024/01/bce3ce47-552c-3155-96c1-4aafb238c2d4-1024x682.jpg"}}},{"id":"rdpqil","name":"div","parent":"rzygds","children":[],"settings":{"taxonomies":["category","post_tag"],"extrasCustomQueryCode":"<style>\nh1.my-heading {\n  color: crimson;\n}\n</style>\n\n<h1 class='my-heading'>Just some custom HTML</h1>","_cssGlobalClasses":["picsvu"]},"label":"Overlay"},{"id":"peuvdg","name":"div","parent":"rzygds","children":["gbzewt","ubnfbx","ujwvbp"],"settings":{"taxonomies":["category","post_tag"],"extrasCustomQueryCode":"<style>\nh1.my-heading {\n  color: crimson;\n}\n</style>\n\n<h1 class='my-heading'>Just some custom HTML</h1>","_cssGlobalClasses":["lvfrat"]},"label":"Content Wrapper"},{"id":"gbzewt","name":"text-link","parent":"peuvdg","children":[],"settings":{"text":"Paper Crane","_cssGlobalClasses":["toqvsx"],"link":{"type":"external","url":"#"}}},{"id":"ubnfbx","name":"divider","parent":"peuvdg","children":[],"settings":{"_cssGlobalClasses":["cvpvzx"]}},{"id":"ujwvbp","name":"text-basic","parent":"peuvdg","children":[],"settings":{"text":"Branding","tag":"p","_cssGlobalClasses":["hcoqaq"]},"label":"Category"},{"id":"ylpeok","name":"code","parent":0,"children":[],"settings":{"code":"<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    const handleMouseEvent = (element, event) => {\n        const currentX = event.clientX;\n        const currentY = event.clientY;\n\n        const deltaX = currentX - element.lastX;\n        const deltaY = currentY - element.lastY;\n\n        let directionClass = '';\n\n        if (Math.abs(deltaX) > Math.abs(deltaY)) {\n            if (deltaX > 0) {\n                directionClass = 'zebre-card--from-right';\n            } else if (deltaX < 0) {\n                directionClass = 'zebre-card--from-left';\n            }\n        } else {\n            if (deltaY > 0) {\n                directionClass = 'zebre-card--from-bottom';\n            } else if (deltaY < 0) {\n                directionClass = 'zebre-card--from-top';\n            }\n        }\n\n        // Remove existing zebre-card direction classes\n        element.classList.forEach(cls => {\n            if (cls.startsWith('zebre-card--')) {\n                element.classList.remove(cls);\n            }\n        });\n\n        // Force a reflow to reset the transition\n        void element.offsetWidth; // Accessing offsetWidth forces a reflow\n\n        // Add the new direction class with a slight delay\n        setTimeout(() => {\n            if (directionClass) {\n                element.classList.add(directionClass);\n            }\n        }, 10); // 10ms delay to ensure the reflow has taken effect\n\n        element.lastX = currentX;\n        element.lastY = currentY;\n    };\n\n    document.querySelectorAll('.zebre-card').forEach(element => {\n        element.lastX = 0;\n        element.lastY = 0;\n\n        element.addEventListener('mouseenter', (event) => {\n            handleMouseEvent(element, event);\n        });\n\n        element.addEventListener('mouseleave', (event) => {\n            handleMouseEvent(element, event);\n        });\n    });\n\n    window.addEventListener('mousemove', (event) => {\n        document.querySelectorAll('.zebre-card').forEach(element => {\n            element.lastX = event.clientX;\n            element.lastY = event.clientY;\n        });\n    });\n});\n\n</script>","executeCode":true,"noRoot":true,"signature":"a8d0a3d2480f73b11e072595ca774a91","user_id":1,"time":1716877247}}],"source":"bricksCopiedElements","sourceUrl":"https://bb-card-tutorial.local","version":"1.9.8","globalClasses":[{"id":"dvrfvx","name":"zebre-card","settings":{"_position":"relative","_overflow":"hidden","_isolation":"isolate","_cssCustom":".zebre-card {\n\t--content-wrapper-spacing: 2rem;\n  --transition1: all 0.3s ease-out;\n  --transition2: all 0.3s ease-in 0.1s;\n  \n  --text-link-opacity: 0;\n  --text-link-opacity-hover: 1;\n  --text-link-transform: translateY(-1em);\n  --text-link-transform-hover: none;\n  \n  --divider-width: 3rem;\n  --divider-width-hover: 7rem;\n  --divider-opacity: 0;\n  --divider-opacity-hover: 1;\n  \n  --category-transform-hover: none;\n  \n  --overlay-inset-block-start: 0;\n  --overlay-inset-block-start-hover: 0;\n  --overlay-inset-block-end: 0;\n  --overlay-inset-block-end-hover: 0;\n  --overlay-inset-inline-start: 0;\n  --overlay-inset-inline-start-hover: 0;\n  --overlay-inset-inline-end: 100%;\n  --overlay-inset-inline-end-hover: 0;\n  \n  \n}\n\n.zebre-card__overlay {\n  transition: var(--transition1);\n\tposition: absolute;\n  inset: var(--overlay-inset-block-start) var(--overlay-inset-inline-end) var(--overlay-inset-block-end) var(--overlay-inset-inline-start);\n  min-width: unset;\n  min-height: unset;\n}\n\n.bricks-is-frontend .zebre-card__text-link{\n  opacity: var(--text-link-opacity);\n}\n\n.zebre-card__text-link{\n  transform: var(--text-link-transform);\n  transition: var(--transition1);\n}\n\n\n.bricks-is-frontend .zebre-card__divider{\n  opacity: var(--divider-opacity);\n}\n.zebre-card__divider{\n  transition: var(--transition2);\n  width: var(--divider-width);\n}\n\n.zebre-card__category {\n  transition: var(--transition1);\n\ttransform: var(--category-transform);\n  width: 100%;\n}\n\n\n.zebre-card:is(:hover, :focus-within) {\n\t--text-link-opacity: var(--text-link-opacity-hover);\n  --text-link-transform: var(--text-link-transform-hover);\n  \n  --divider-width: var(--divider-width-hover);\n  --divider-opacity: var(--divider-opacity-hover);\n  \n  --category-transform: var(--category-transform);\n  \n  --overlay-inset-block-start: var(--overlay-inset-block-start-hover);\n  --overlay-inset-block-end: var(--overlay-inset-block-end-hover);\n  --overlay-inset-inline-start: var(--overlay-inset-inline-start-hover);\n  --overlay-inset-inline-end: var(--overlay-inset-inline-end-hover);\n}\n\n/************\nMODIFIERS \n***************/\n\n.zebre-card--from-left{\n  --category-transform: translateX(-100%);\n  \n  --overlay-inset-block-start: 0;\n  --overlay-inset-block-start-hover: 0;\n  --overlay-inset-block-end: 0;\n  --overlay-inset-block-end-hover: 0;\n  --overlay-inset-inline-start: 0;\n  --overlay-inset-inline-start-hover: 0;\n  --overlay-inset-inline-end: 100%;\n  --overlay-inset-inline-end-hover: 0;\n}\n\n.zebre-card--from-right{\n  --category-transform: translateX(100%);\n  \n  --overlay-inset-block-start: 0;\n  --overlay-inset-block-start-hover: 0;\n  --overlay-inset-block-end: 0;\n  --overlay-inset-block-end-hover: 0;\n  --overlay-inset-inline-start: 100%;\n  --overlay-inset-inline-start-hover: 0;\n  --overlay-inset-inline-end: 0;\n  --overlay-inset-inline-end-hover: 0;\n}\n\n.zebre-card--from-top{\n  --category-transform: translateY(-400px);\n  \n  --overlay-inset-block-start: 0;\n  --overlay-inset-block-start-hover: 0;\n  --overlay-inset-block-end: 100%;\n  --overlay-inset-block-end-hover: 0;\n  --overlay-inset-inline-start: 0;\n  --overlay-inset-inline-start-hover: 0;\n  --overlay-inset-inline-end: 0;\n  --overlay-inset-inline-end-hover: 0;\n}\n\n.zebre-card--from-bottom{\n  --category-transform: translateY(400px);\n  \n  --overlay-inset-block-start: 100%;\n  --overlay-inset-block-start-hover: 0;\n  --overlay-inset-block-end: 0;\n  --overlay-inset-block-end-hover: 0;\n  --overlay-inset-inline-start: 0;\n  --overlay-inset-inline-start-hover: 0;\n  --overlay-inset-inline-end: 0;\n  --overlay-inset-inline-end-hover: 0;\n}"}},{"id":"ysiige","name":"zebre-card__image","settings":{"_aspectRatio":"1","_objectFit":"cover"}},{"id":"picsvu","name":"zebre-card__overlay","settings":{"_background":{"color":{"hex":"#ffc300","rgb":"rgba(255, 195, 0, 0.89)","hsl":"hsla(46, 100%, 50%, 0.89)"}}}},{"id":"lvfrat","name":"zebre-card__content-wapper","settings":{"_position":"absolute","_left":"0","_bottom":"0","_right":"0","_top":"0","_display":"flex","_direction":"column","_justifyContent":"center","_alignItems":"center","_padding":{"top":"var(--content-wrapper-spacing)","right":"var(--content-wrapper-spacing)","bottom":"var(--content-wrapper-spacing)","left":"var(--content-wrapper-spacing)"},"_rowGap":"var(--content-wrapper-spacing)"}},{"id":"toqvsx","name":"zebre-card__text-link","settings":{"_typography":{"line-height":"1","text-transform":"uppercase"}}},{"id":"cvpvzx","name":"zebre-card__divider","settings":{"justifyContent":"center"}},{"id":"hcoqaq","name":"zebre-card__category","settings":{"_typography":{"line-height":"1","text-align":"center"}}}],"globalElements":[]}