{"id":6,"date":"2026-04-22T17:57:54","date_gmt":"2026-04-22T17:57:54","guid":{"rendered":"https:\/\/hoverstudio.co.za\/?page_id=6"},"modified":"2026-04-22T19:32:44","modified_gmt":"2026-04-22T19:32:44","slug":"home","status":"publish","type":"page","link":"https:\/\/hoverstudio.co.za\/","title":{"rendered":"Home"},"content":{"rendered":"<style>.elementor-6 .elementor-element.elementor-element-caa9b65{--display:flex;}:root{--page-title-display:none;}<\/style>\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"6\" class=\"elementor elementor-6\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-caa9b65 e-con-full e-flex e-con e-parent\" data-id=\"caa9b65\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4859e6d elementor-widget elementor-widget-html\" data-id=\"4859e6d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n.fullwidth-slider {\n  position: relative;\n  width: 100vw;\n  height: 80vh;\n  margin-left: calc(-50vw + 50%);\n  overflow: hidden;\n  cursor: ew-resize;\n}\n\n\/* BOTH VIDEOS CENTERED + FIXED *\/\n.fullwidth-slider video {\n  position: absolute;\n  top: 0;\n  left: 50%;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transform: translateX(-50%);\n  pointer-events: none;\n}\n\n\/* AFTER VIDEO MASK *\/\n.after-video {\n  position: absolute;\n  inset: 0;\n  clip-path: inset(0 0 0 50%); \/* start in middle *\/\n}\n\n\/* LINE *\/\n.slider-line {\n  position: absolute;\n  top: 0;\n  left: 50%;\n  width: 2px;\n  height: 100%;\n  background: #fff;\n  transform: translateX(-50%);\n  z-index: 2;\n}\n\n\/* HANDLE *\/\n.slider-handle {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 50px;\n  height: 50px;\n  background: #fff;\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 3;\n  pointer-events: none;\n  box-shadow: 0 5px 20px rgba(0,0,0,0.2);\n}\n\n.slider-handle svg {\n  width: 20px;\n  height: 20px;\n  stroke: #000;\n}\n<\/style>\n\n<div class=\"fullwidth-slider\" id=\"sliderFW\">\n\n  <!-- BEFORE (LEFT SIDE) -->\n  <video autoplay muted loop playsinline webkit-playsinline>\n    <source src=\"https:\/\/hoverstudio.co.za\/wp-content\/uploads\/2026\/04\/01281.mp4\" type=\"video\/mp4\">\n  <\/video>\n\n  <!-- AFTER (RIGHT SIDE) -->\n  <div class=\"after-video\" id=\"afterFW\">\n    <video autoplay muted loop playsinline webkit-playsinline>\n      <source src=\"https:\/\/hoverstudio.co.za\/wp-content\/uploads\/2026\/04\/01282.mp4\" type=\"video\/mp4\">\n    <\/video>\n  <\/div>\n\n  <div class=\"slider-line\" id=\"lineFW\"><\/div>\n\n  <div class=\"slider-handle\" id=\"handleFW\">\n    <svg viewBox=\"0 0 24 24\" fill=\"none\">\n      <path d=\"M8 6L2 12L8 18\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n      <path d=\"M16 6L22 12L16 18\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n    <\/svg>\n  <\/div>\n\n<\/div>\n\n<script>\nconst container = document.getElementById(\"sliderFW\");\nconst after = document.getElementById(\"afterFW\");\nconst line = document.getElementById(\"lineFW\");\nconst handle = document.getElementById(\"handleFW\");\n\nfunction updateSlider(x) {\n  const rect = container.getBoundingClientRect();\n  let pos = x - rect.left;\n\n  pos = Math.max(0, Math.min(pos, rect.width));\n  const percent = (pos \/ rect.width) * 100;\n\n  \/* RIGHT-SIDE REVEAL *\/\n  after.style.clipPath = `inset(0 0 0 ${percent}%)`;\n\n  line.style.left = percent + \"%\";\n  handle.style.left = percent + \"%\";\n}\n\n\/* HOVER *\/\ncontainer.addEventListener(\"mousemove\", (e) => {\n  updateSlider(e.clientX);\n});\n\n\/* TOUCH *\/\ncontainer.addEventListener(\"touchmove\", (e) => {\n  updateSlider(e.touches[0].clientX);\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hoverstudio.co.za\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hoverstudio.co.za\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hoverstudio.co.za\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hoverstudio.co.za\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hoverstudio.co.za\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":17,"href":"https:\/\/hoverstudio.co.za\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":65,"href":"https:\/\/hoverstudio.co.za\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/65"}],"wp:attachment":[{"href":"https:\/\/hoverstudio.co.za\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}