Card Transition Part 2 template

template.json

{"content":[{"id":"horvqp","name":"section","parent":0,"children":["sanapy"],"settings":{}},{"id":"sanapy","name":"container","parent":"horvqp","children":["tnmmsn","ulnnev","nldauu","dvkokk"],"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":"tnmmsn","name":"div","parent":"sanapy","children":["ejhnwh","zfemip","tpipnu"],"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":["azsttb"]},"label":"Zebre Card V2"},{"id":"ejhnwh","name":"image","parent":"tnmmsn","children":[],"settings":{"tag":"figure","caption":"none","_cssGlobalClasses":["nlnmzm"],"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":"zfemip","name":"div","parent":"tnmmsn","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":["jtfvzy"]},"label":"Overlay"},{"id":"tpipnu","name":"div","parent":"tnmmsn","children":["bclvml","icabgl","zdsavl"],"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":["bgjqyy"]},"label":"Content"},{"id":"bclvml","name":"text-link","parent":"tpipnu","children":[],"settings":{"text":"Paper Crane","_cssGlobalClasses":["aecekv"],"link":{"type":"external","url":"#"}}},{"id":"icabgl","name":"divider","parent":"tpipnu","children":[],"settings":{"_cssGlobalClasses":["xvegjh"]}},{"id":"zdsavl","name":"text-basic","parent":"tpipnu","children":[],"settings":{"text":"Brand","tag":"p","_cssGlobalClasses":["tvqgsu"]},"label":"Category"},{"id":"ulnnev","name":"div","parent":"sanapy","children":["dhvfhw","hjetde","ziuusn"],"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":["azsttb","xursff"]},"label":"Zebre Card V2 --from-left"},{"id":"dhvfhw","name":"image","parent":"ulnnev","children":[],"settings":{"tag":"figure","caption":"none","_cssGlobalClasses":["nlnmzm"],"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":"hjetde","name":"div","parent":"ulnnev","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":["jtfvzy"]},"label":"Overlay"},{"id":"ziuusn","name":"div","parent":"ulnnev","children":["harjji","mirnbw","vegxno"],"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":["bgjqyy"]},"label":"Content"},{"id":"harjji","name":"text-link","parent":"ziuusn","children":[],"settings":{"text":"Paper Crane","_cssGlobalClasses":["aecekv"],"link":{"type":"external","url":"#"}}},{"id":"mirnbw","name":"divider","parent":"ziuusn","children":[],"settings":{"_cssGlobalClasses":["xvegjh"]}},{"id":"vegxno","name":"text-basic","parent":"ziuusn","children":[],"settings":{"text":"Brand","tag":"p","_cssGlobalClasses":["tvqgsu"]},"label":"Category"},{"id":"nldauu","name":"div","parent":"sanapy","children":["lavnph","qpprvw","oztbsp"],"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":["azsttb","beluqa"]},"label":"Zebre Card V2 --from-top"},{"id":"lavnph","name":"image","parent":"nldauu","children":[],"settings":{"tag":"figure","caption":"none","_cssGlobalClasses":["nlnmzm"],"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":"qpprvw","name":"div","parent":"nldauu","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":["jtfvzy"]},"label":"Overlay"},{"id":"oztbsp","name":"div","parent":"nldauu","children":["jrhxrd","fikbyi","fzylva"],"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":["bgjqyy"]},"label":"Content"},{"id":"jrhxrd","name":"text-link","parent":"oztbsp","children":[],"settings":{"text":"Paper Crane","_cssGlobalClasses":["aecekv"],"link":{"type":"external","url":"#"}}},{"id":"fikbyi","name":"divider","parent":"oztbsp","children":[],"settings":{"_cssGlobalClasses":["xvegjh"]}},{"id":"fzylva","name":"text-basic","parent":"oztbsp","children":[],"settings":{"text":"Brand","tag":"p","_cssGlobalClasses":["tvqgsu"]},"label":"Category"},{"id":"dvkokk","name":"div","parent":"sanapy","children":["ocnuoa","ghwgtx","tlaksm"],"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":["azsttb","kjkdag"]},"label":"Zebre Card V2 --from-bottom"},{"id":"ocnuoa","name":"image","parent":"dvkokk","children":[],"settings":{"tag":"figure","caption":"none","_cssGlobalClasses":["nlnmzm"],"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":"ghwgtx","name":"div","parent":"dvkokk","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":["jtfvzy"]},"label":"Overlay"},{"id":"tlaksm","name":"div","parent":"dvkokk","children":["xktvav","sczrat","oxxdry"],"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":["bgjqyy"]},"label":"Content"},{"id":"xktvav","name":"text-link","parent":"tlaksm","children":[],"settings":{"text":"Paper Crane","_cssGlobalClasses":["aecekv"],"link":{"type":"external","url":"#"}}},{"id":"sczrat","name":"divider","parent":"tlaksm","children":[],"settings":{"_cssGlobalClasses":["xvegjh"]}},{"id":"oxxdry","name":"text-basic","parent":"tlaksm","children":[],"settings":{"text":"Brand","tag":"p","_cssGlobalClasses":["tvqgsu"]},"label":"Category"}],"source":"bricksCopiedElements","sourceUrl":"https://bb-card-tutorial.local","version":"1.9.8","globalClasses":[{"id":"azsttb","name":"zebre-card-v2","settings":{"_position":"relative","_isolation":"isolate","_cssCustom":".zebre-card-v2 {\n\t--transition1: all 0.3s ease-out;\n  --transition2: all 0.3s ease-in 0.1s;\n  \n  --overlay-inset-block-start: 0;\n  --overlay-inset-block-start-hover: 0;\n  \n  --overlay-inset-block-end: 0;\n  --overlay-inset-block-end-hover: 0;\n  \n  --overlay-inset-inline-start: 0;\n  --overlay-inset-inline-start-hover: 0;\n  \n  --overlay-inset-inline-end: 100%;\n  --overlay-inset-inline-end-hover: 0;\n  \n  --text-link-transform: translateY(-30px);\n  --text-link-transform-hover: none;\n  --text-link-opacity: 0;\n  --text-link-opacity-hover: 1;\n  \n  --divider-width: 3rem;\n  --divider-width-hover: 7rem;\n  --divider-opacity: 0;\n  --divider-opacity-hover: 1;\n  \n  --category-transform: translateX(-100%);\n  --category-transform-hover: none;\n}\n\n.zebre-card-v2__overlay {\n  transition: var(--transition1);\n\tinset: var(--overlay-inset-block-start) var(--overlay-inset-inline-end) var(--overlay-inset-block-end) var(--overlay-inset-inline-start);\n  /* Editor fix */\n  min-width: unset;\n  min-height: unset;\n}\n\n.zebre-card-v2__text-link {\n\ttransition: var(--transition1);\n  transform: var(--text-link-transform);\n}\n.bricks-is-frontend .zebre-card-v2__text-link{\n  opacity: var(--text-link-opacity);\n}\n\n.zebre-card-v2__divider {\n  transition: var(--transition2);\n\twidth: var(--divider-width);\n  \n}\n.bricks-is-frontend .zebre-card-v2__divider{\n  opacity: var(--divider-opacity);\n}\n\n.zebre-card-v2__category {\n  transition: var(--transition1);\n\ttransform: var(--category-transform);\n  width: 100%;\n}\n\n\n\n.zebre-card-v2:is(:hover, :focus-within) {\n\t--overlay-inset-block-start: var(--overlay-inset-block-start-hover);\n  \n  --overlay-inset-block-end: var(--overlay-inset-block-end-hover);\n  \n  --overlay-inset-inline-start: var(--overlay-inset-inline-start-hover);\n  \n  --overlay-inset-inline-end: var(--overlay-inset-inline-end-hover);\n  \n  --text-link-transform: var(--text-link-transform-hover);\n  --text-link-opacity: var(--text-link-opacity-hover);\n  \n  --category-transform: var(--category-transform-hover);\n  \n  --divider-width: var(--divider-width-hover);\n  --divider-opacity: var(--divider-opacity-hover);\n\n}","_overflow":"hidden"}},{"id":"nlnmzm","name":"zebre-card-v2__image","settings":[]},{"id":"jtfvzy","name":"zebre-card-v2__overlay","settings":{"_background":{"color":{"hex":"#ffd500","rgb":"rgba(255, 213, 0, 0.86)","hsl":"hsla(50, 100%, 50%, 0.86)"}},"_position":"absolute"}},{"id":"bgjqyy","name":"zebre-card-v2__content","settings":{"_position":"absolute","_left":"0","_bottom":"0","_right":"0","_top":"0","_display":"flex","_direction":"column","_justifyContent":"center","_alignItems":"center","_padding":{"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"},"_rowGap":"1.5rem"}},{"id":"aecekv","name":"zebre-card-v2__text-link","settings":{"_typography":{"line-height":"1","text-transform":"uppercase","font-weight":"500"}}},{"id":"xvegjh","name":"zebre-card-v2__divider","settings":[]},{"id":"tvqgsu","name":"zebre-card-v2__category","settings":{"_typography":{"line-height":"1","text-align":"center"}}},{"id":"xursff","name":"zebre-card-v2--from-right","settings":{"_cssCustom":".zebre-card-v2--from-right {\n\n  \n  --overlay-inset-inline-start: 100%;\n  --overlay-inset-inline-start-hover: 0;\n  \n  --overlay-inset-inline-end: 0;\n  --overlay-inset-inline-end-hover: 0;\n  \n  --category-transform: translateX(100%);\n  --category-transform-hover: none;\n}"}},{"id":"beluqa","name":"zebre-card-v2--from-top","settings":{"_cssCustom":".zebre-card-v2--from-top {\n\t --overlay-inset-block-start: 0;\n  --overlay-inset-block-start-hover: 0;\n  \n  --overlay-inset-block-end: 100%;\n  --overlay-inset-block-end-hover: 0;\n  \n  --overlay-inset-inline-start: 0;\n  --overlay-inset-inline-start-hover: 0;\n  \n  --overlay-inset-inline-end: 0;\n  --overlay-inset-inline-end-hover: 0;\n  \n  --category-transform: translateY(-400px);\n  --category-transform-hover: none;\n}"}},{"id":"kjkdag","name":"zebre-card-v2--from-bottom","settings":{"_cssCustom":".zebre-card-v2--from-bottom {\n\t --overlay-inset-block-start: 100%;\n  --overlay-inset-block-start-hover: 0;\n  \n  --overlay-inset-block-end: 0;\n  --overlay-inset-block-end-hover: 0;\n  \n  --overlay-inset-inline-start: 0;\n  --overlay-inset-inline-start-hover: 0;\n  \n  --overlay-inset-inline-end: 0;\n  --overlay-inset-inline-end-hover: 0;\n  \n  \n  --category-transform: translateY(400px);\n  --category-transform-hover: none;\n}"}}],"globalElements":[]}