Slide Box Element

The Slide Box element is a variation of the Oxygen Flip Box Composite element. Instead of flipping, the image and content will slide up and down.

{"component":{"id":2,"name":"ct_div_block","options":{"ct_id":2,"ct_parent":100043,"selector":"div_block-2-82","classes":["lxe_slidebox"],"nicename":"Slide Box","activeselector":"lxe_slidebox"},"children":[{"id":3,"name":"ct_code_block","options":{"ct_id":3,"ct_parent":2,"selector":"code_block-3-82","original":{"code-php":"","code-css":".lxe_slidebox {n  --slide-box-height:100vh;n}nn.lxe_slidebox__front {n  height:var(--slide-box-height);n}nnbody.ng-scope .lxe_slidebox__back {ntheight:var(--slide-box-height);ntposition:relative;n}nn.lxe_slidebox__front,n.lxe_slidebox__back {n transition: 0.7s all ease-in-out;n backface-visibility: hidden;n -webkit-backface-visibility: hidden;n}nnbody:not(.ng-scope) .lxe_slidebox:hover > .lxe_slidebox__back {ntheight:var(--slide-box-height);n}"},"nicename":"Slide Box Code","ct_content":""},"depth":3},{"id":4,"name":"ct_div_block","options":{"ct_id":4,"ct_parent":2,"selector":"div_block-4-82","classes":["lxe_slidebox__front"],"nicename":"Front","activeselector":"lxe_slidebox__front"},"children":[{"id":5,"name":"ct_headline","options":{"ct_id":5,"ct_parent":4,"selector":"headline-5-82","original":{"tag":"h2","color":"#ffffff"},"ct_content":"Slide Box Front","nicename":"Heading (#60)"},"depth":4},{"id":6,"name":"ct_fancy_icon","options":{"ct_id":6,"ct_parent":4,"selector":"fancy_icon-6-82","original":{"icon-size":"32","icon-id":"FontAwesomeicon-arrow-up","margin-top":"16","margin-bottom":"16","icon-color":"#ffffff"},"ct_content":"","nicename":"Icon (#61)"},"depth":4},{"id":7,"name":"ct_text_block","options":{"ct_id":7,"ct_parent":4,"selector":"text_block-7-82","original":{"color":"#ffffff"},"ct_content":"Hover over this on the front end to see the effect.","nicename":"Text (#62)"},"depth":4}],"depth":3},{"id":8,"name":"ct_div_block","options":{"ct_id":8,"ct_parent":2,"selector":"div_block-8-82","classes":["lxe_slidebox__back"],"nicename":"Back","original":[],"activeselector":"lxe_slidebox__back"},"children":[{"id":9,"name":"ct_headline","options":{"ct_id":9,"ct_parent":8,"selector":"headline-9-82","original":{"tag":"h2","color":"#ffffff"},"ct_content":"Slide Box Back","nicename":"Heading (#64)"},"depth":4},{"id":10,"name":"ct_fancy_icon","options":{"ct_id":10,"ct_parent":8,"selector":"fancy_icon-10-82","original":{"icon-size":"32","icon-id":"FontAwesomeicon-arrow-down","margin-top":"16","margin-bottom":"16","icon-color":"#ffffff"},"ct_content":"","nicename":"Icon (#65)"},"depth":4},{"id":11,"name":"ct_link","options":{"ct_id":11,"ct_parent":8,"selector":"link-11-82","original":{"padding-left":"32","padding-right":"32","padding-top":"8","padding-bottom":"8","border-top-color":"#f9f9fa","border-right-color":"#f9f9fa","border-bottom-color":"#f9f9fa","border-left-color":"#f9f9fa","border-top-width":"1","border-right-width":"1","border-bottom-width":"1","border-left-width":"1","border-top-style":"solid","border-right-style":"solid","border-bottom-style":"solid","border-left-style":"solid"},"nicename":"Link Wrapper (#66)"},"children":[{"id":12,"name":"ct_text_block","options":{"ct_id":12,"ct_parent":11,"selector":"text_block-12-82","original":{"color":"#ffffff"},"ct_content":"Click me!","nicename":"Text (#67)"},"depth":5}],"depth":4}],"depth":3}],"depth":2},"classes":{"lxe_slidebox":{"key":"lxe_slidebox","parent":"luxi-elements","original":{"width-unit":"%","height-unit":"%","position":"relative","overflow":"hidden","width":"100","height":"100"}},"lxe_slidebox__front":{"key":"lxe_slidebox__front","parent":"luxi-elements","original":{"width-unit":"%","background-position-left-unit":"%","background-position-top-unit":"%","height-unit":"px","min-height-unit":"px","width":"100","flex-direction":"column","display":"flex","align-items":"center","text-align":"center","justify-content":"center","padding-top":"32","padding-left":"32","padding-right":"32","padding-bottom":"32","background-image":"https://elements.oxy.host/wp-content/uploads/sites/52/2021/06/photo-1462717585237-7fafe19c5448-1024x768.jpg","background-position-left":"50","background-position-top":"50","background-size":"cover","overlay-color":"rgba(25,22,22,0.2)"}},"lxe_slidebox__back":{"key":"lxe_slidebox__back","parent":"luxi-elements","original":{"width-unit":"%","height-unit":"px","background-position-left-unit":"%","background-position-top-unit":"%","position":"absolute","width":"100","bottom":"0","height":"0","z-index":"1","background-image":"https://elements.oxy.host/wp-content/uploads/sites/52/2021/06/photo-1470115493989-233e397d5930-1024x683.jpg","flex-direction":"column","display":"flex","align-items":"center","justify-content":"center","text-align":"center","overflow":"hidden","background-size":"cover","background-position-left":"50","background-position-top":"50"}}}}
© 2020-2024 Luxibay
Name(Required)
Please let us know what's on your mind. Have a question for us? Ask away.
This field is for validation purposes and should be left unchanged.