Bricks hero with synchronised transitions.

template.json

{"content":[{"id":"rwtoje","name":"section","parent":0,"children":["vryybc","mjxsbw","wwmhrs"],"settings":{"_cssGlobalClasses":["yiubhh","smelsw"]},"label":"Hero 1 (CSS)"},{"id":"vryybc","name":"image","parent":"rwtoje","children":[],"settings":{"tag":"figure","caption":"none","_cssGlobalClasses":["kudcmj","lmmpmw"],"image":{"id":11,"filename":"6a0e467f-803c-32eb-a1bd-986eba296d67.jpg","size":"large","full":"https://bricks-only-live-demos.local/wp-content/uploads/2023/12/6a0e467f-803c-32eb-a1bd-986eba296d67.jpg","url":"https://bricks-only-live-demos.local/wp-content/uploads/2023/12/6a0e467f-803c-32eb-a1bd-986eba296d67-1024x682.jpg"}},"label":"Overlay Image"},{"id":"mjxsbw","name":"block","parent":"rwtoje","children":[],"settings":{"_cssGlobalClasses":["rczaig","swsrem","rwlhym"]},"label":"Overlay Block"},{"id":"wwmhrs","name":"container","parent":"rwtoje","children":["gpzyue"],"settings":{"_cssGlobalClasses":["otowbe"]},"label":"Wrapper"},{"id":"gpzyue","name":"block","parent":"wwmhrs","children":["qhjlra","vpfjcb"],"settings":{"_cssGlobalClasses":["svbckg"]},"label":"Grid"},{"id":"qhjlra","name":"block","parent":"gpzyue","children":["psfcte"],"settings":{"_cssGlobalClasses":["jzxiyc","rwlhym"]},"label":"Cell1"},{"id":"psfcte","name":"block","parent":"qhjlra","children":["fzfrdu","oqwduv","sxzyvg"],"settings":{"_cssGlobalClasses":["gdcesn","rivnds"]},"label":"Content"},{"id":"fzfrdu","name":"block","parent":"psfcte","children":["qjrgrz","xaxzwa"],"settings":{"_cssGlobalClasses":["sbzfjp","rwlhym"]},"label":"Header"},{"id":"qjrgrz","name":"heading","parent":"fzfrdu","children":[],"settings":{"text":"I am a heading","_cssGlobalClasses":["lnidrz"]}},{"id":"xaxzwa","name":"text-basic","parent":"fzfrdu","children":[],"settings":{"text":"Accent Heading","tag":"p","_cssGlobalClasses":["fyzbtj","hkcfkv"]},"label":"Accent Heading"},{"id":"oqwduv","name":"block","parent":"psfcte","children":["vceeji"],"settings":{"_cssGlobalClasses":["oukfwg","rwlhym"]},"label":"Body"},{"id":"vceeji","name":"text-basic","parent":"oqwduv","children":[],"settings":{"text":"Here goes your text ... Select any part of your text to access the formatting toolbar.","tag":"p","_cssGlobalClasses":["pzbuvk"]},"label":"Lede"},{"id":"sxzyvg","name":"block","parent":"psfcte","children":["ufrlrd"],"settings":{"_cssGlobalClasses":["nllyxy","rwlhym"]},"label":"Footer"},{"id":"ufrlrd","name":"div","parent":"sxzyvg","children":["qjmdva","dvyfiv"],"settings":{"_cssGlobalClasses":["xpinjh"]},"label":"Buttons"},{"id":"qjmdva","name":"button","parent":"ufrlrd","children":[],"settings":{"text":"I am a button","style":"primary","_cssGlobalClasses":["svtgrp"],"link":{"type":"external","url":"#"}}},{"id":"dvyfiv","name":"button","parent":"ufrlrd","children":[],"settings":{"text":"I am a button","_cssGlobalClasses":["gsxtgb"],"style":"secondary","link":{"type":"external","url":"#"}},"label":"Button Alt"},{"id":"vpfjcb","name":"block","parent":"gpzyue","children":["iiknea"],"settings":{"_cssGlobalClasses":["fcfdza"]},"label":"Cell2"},{"id":"iiknea","name":"block","parent":"vpfjcb","children":["rzivpk"],"settings":{"_cssGlobalClasses":["qrcvry"]},"label":"Perspective Wrapper"},{"id":"rzivpk","name":"image","parent":"iiknea","children":[],"settings":{"tag":"figure","caption":"none","_cssGlobalClasses":["frjidm","rwlhym"],"image":{"id":49,"filename":"nnca_z6fjg4.jpg","size":"large","full":"https://bricks-only-live-demos.local/wp-content/uploads/2023/12/nnca_z6fjg4.jpg","url":"https://bricks-only-live-demos.local/wp-content/uploads/2023/12/nnca_z6fjg4-683x1024.jpg"},"sources":[{"id":"ccayco"}]},"label":"Feature Image"}],"source":"bricksCopiedElements","sourceUrl":"https://bricks-only-live-demos.local","version":"1.9.4","globalClasses":[{"id":"yiubhh","name":"hero-1","settings":{"_cssCustom":".hero-1__overlay-block {\n\t--background: #00000077;\n}\n.hero-1:is(:hover, :focus-within) .hero-1__overlay-block{\n\t--background: #000000cc;\n}\n\n.hero-1__cell1 {\n\t--transform: rotate(3deg) translateX(30px);\n  --opacity: 0.4;\n}\n.hero-1:is(:hover, :focus-within) .hero-1__cell1 {\n  --transform: none;\n  --opacity: 1;\n}\n\n.hero-1__feature-image {\n\t--transform: rotateX(12deg) rotateY(12deg) scale(0.9);\n  --transition-duration: 0.3s;\n}\n.hero-1:is(:hover, :focus-within) .hero-1__feature-image {\n  --transform: rotateX(-12deg) rotateY(-12deg) scale(1.1);\n  \n}"},"cat":false},{"id":"smelsw","name":"has-overlay-children","settings":{"_position":"relative","_isolation":"isolate"}},{"id":"kudcmj","name":"hero-1__overlay-image","settings":{},"cat":false},{"id":"lmmpmw","name":"overlay-image","settings":{"_cssCustom":":where(.overlay-image) {\n  --filter: none;\n}\n\n.overlay-image {\n\tposition: absolute;\n  inset: 0;\n  z-index: -2;\n  width: 100%;\n  height: 100%;\n  filter: var(--filter);\n}\n.overlay-image img{\n  object-fit: cover;\n}"}},{"id":"rczaig","name":"hero-1__overlay-block","settings":{},"cat":false},{"id":"swsrem","name":"overlay-block","settings":{"_cssCustom":":where(.overlay-block) {\n  --background: #00000066;\n}\n\n.overlay-block {\n\tz-index: -1;\n  position: absolute;\n  inset: 0;\n  background: var(--background);\n}"}},{"id":"rwlhym","name":"transform-utility","settings":{"_cssCustom":":where(.transform-utility) {\n\t--transform: none;\n  --opacity: 1;\n  --background: initial;\n  --transform-origin: initial;\n  --transform-style: flat;\n  --transition-delay: 0;\n  --transition-duration: 0.6s; \n  --transition-property: all;\n  --transition-timing-function: ease;\n  --box-shadow: none; \n}\n\n:where(.transform-utility) {\n  transform-origin: var(--transform-origin);\n  transform-style: var(--transform-style);\n  transform: var(--transform);\n  transition-delay: var(--transition-delay);\n  transition-duration: var(--transition-duration);\n  transition-property: var(--transition-property);\n  transition-timing-function: var(--transition-timing-function);\n  box-shadow: var(--box-shadow);\n  background: var(--background);\n}\n\n/* Do not transition opacity in the Editor */\n.bricks-is-frontend .transform-utility {\n\topacity: var(--opacity);\n}"}},{"id":"otowbe","name":"hero-1__wrapper","settings":{},"cat":false},{"id":"svbckg","name":"hero-1__grid","settings":{"_display":"grid","_gridGap":"3rem","_gridTemplateColumns":"1fr 1fr"},"cat":false},{"id":"jzxiyc","name":"hero-1__cell1","settings":{"_justifyContent":"center"},"cat":false},{"id":"gdcesn","name":"hero-1__content","settings":{"_typography":{"color":{"hex":"#f5f5f5","id":"a973c2","name":"Color #1"}},"_rowGap":"2rem","_cssCustom":".hero-1__content > * {\n\t--transform: translateY(10px);\n}\n\n.hero-1__content:is(:hover,:focus-within) > * {\n\t--transform: none;\n}"},"cat":false},{"id":"rivnds","name":"transform-utility--stagger","settings":{"_cssCustom":".transform-utility--stagger {\n\t--delay-step: 0.1s;\n}\n.transform-utility--stagger > *:nth-child(2) {\n\t--transition-delay: var(--delay-step);\n}\n.transform-utility--stagger> *:nth-child(3) {\n\t--transition-delay: calc( 2 * var(--delay-step));\n}\n.transform-utility--stagger > *:nth-child(4) {\n\t--transition-delay: calc( 3 * var(--delay-step));\n}\n.transform-utility--stagger > *:nth-child(5) {\n\t--transition-delay: calc( 4 * var(--delay-step));\n}\n.transform-utility--stagger > *:nth-child(6) {\n\t--transition-delay: calc( 5 * var(--delay-step));\n}\n.transform-utility--stagger > *:nth-child(7) {\n\t--transition-delay: calc( 6 * var(--delay-step));\n}\n.transform-utility--stagger > *:nth-child(8) {\n\t--transition-delay: calc( 7 * var(--delay-step));\n}\n.transform-utility--stagger > *:nth-child(9) {\n\t--transition-delay: calc( 8 * var(--delay-step));\n}\n.transform-utility--stagger > *:nth-child(10) {\n\t--transition-delay: calc( 9 * var(--delay-step));\n}\n"}},{"id":"sbzfjp","name":"hero-1__header","settings":{},"cat":false},{"id":"lnidrz","name":"hero-1__heading","settings":{},"cat":false},{"id":"fyzbtj","name":"hero-1__accent-heading","settings":{},"cat":false},{"id":"hkcfkv","name":"heading--accent","settings":{"_typography":{"color":{"hex":"#81d4fa","id":"b844ff","name":"Color #15"},"text-transform":"uppercase","line-height":"1","letter-spacing":"3","font-weight":"700"}}},{"id":"oukfwg","name":"hero-1__body","settings":{},"cat":false},{"id":"pzbuvk","name":"hero-1__lede","settings":{"_typography":{"color":{"hex":"#ffeb3b","id":"9fe881","name":"Color #7"}}},"cat":false},{"id":"nllyxy","name":"hero-1__footer","settings":{},"cat":false},{"id":"xpinjh","name":"hero-1__buttons","settings":{"_display":"flex","_columnGap":"1rem"},"cat":false},{"id":"svtgrp","name":"hero-1__button","settings":{"style":"primary"},"cat":false},{"id":"gsxtgb","name":"hero-1__button-alt","settings":{"style":"primary"},"cat":false},{"id":"fcfdza","name":"hero-1__cell2","settings":{},"cat":false},{"id":"qrcvry","name":"hero-1__perspective-wrapper","settings":{"_cssCustom":".hero-1__perspective-wrapper {\n\tperspective: 800px;\n}"},"cat":false},{"id":"frjidm","name":"hero-1__feature-image","settings":{"_aspectRatio":"1","_objectFit":"cover","_border":{"width":{"top":"2","right":"2","bottom":"2","left":"2"},"style":"solid","color":{"hex":"#9e9e9e","id":"888be6","name":"Color #3"},"radius":{"top":"3rem","right":"3rem","bottom":"3rem","left":"3rem"}},"_overflow":"hidden"},"cat":false}],"globalElements":[]}