{"id":1929,"date":"2025-08-26T09:59:10","date_gmt":"2025-08-26T09:59:10","guid":{"rendered":"https:\/\/bppmg.pl\/?page_id=1929"},"modified":"2025-08-26T10:41:35","modified_gmt":"2025-08-26T10:41:35","slug":"lupkakolor","status":"publish","type":"page","link":"https:\/\/bppmg.pl\/index.php\/lupkakolor\/","title":{"rendered":"lupkakolor"},"content":{"rendered":"\n<div class=\"image-wrapper\">\n  <!-- Obraz czarno-bia\u0142y -->\n  <img decoding=\"async\" src=\"https:\/\/bppmg.pl\/wp-content\/uploads\/2025\/08\/\/bw.png\" class=\"image bw\" alt=\"Czarno-bia\u0142y obraz\">\n  <!-- Obraz kolorowy -->\n  <img decoding=\"async\" src=\"https:\/\/bppmg.pl\/wp-content\/uploads\/2025\/08\/\/color.png\" class=\"image color\" alt=\"Kolorowy obraz\">\n<\/div>\n\n<style>\n.image-wrapper {\n  position: relative;\n  display: inline-block;\n  overflow: hidden;\n}\n\n.image-wrapper .image {\n  display: block;\n  max-width: 100%; \/* \u017ceby obraz by\u0142 responsywny *\/\n  height: auto;\n}\n\n.image-wrapper .color {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  clip-path: circle(0px at 0 0); \/* pocz\u0105tkowo niewidoczny *\/\n  transition: clip-path 0.05s;\n}\n<\/style>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n  const wrapper = document.querySelector('.image-wrapper');\n  const colorImage = wrapper.querySelector('.color');\n\n  wrapper.addEventListener('mousemove', e => {\n    const rect = wrapper.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    const y = e.clientY - rect.top;\n\n    \/\/ promie\u0144 ko\u0142a (np. 80px \u2013 mo\u017cna zmieni\u0107)\n    colorImage.style.clipPath = `circle(140px at ${x}px ${y}px)`;\n  });\n\n  wrapper.addEventListener('mouseleave', () => {\n    colorImage.style.clipPath = `circle(0px at 0 0)`; \/\/ ukrycie po wyj\u015bciu kursora\n  });\n});\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1929","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bppmg.pl\/index.php\/wp-json\/wp\/v2\/pages\/1929","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bppmg.pl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bppmg.pl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bppmg.pl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bppmg.pl\/index.php\/wp-json\/wp\/v2\/comments?post=1929"}],"version-history":[{"count":3,"href":"https:\/\/bppmg.pl\/index.php\/wp-json\/wp\/v2\/pages\/1929\/revisions"}],"predecessor-version":[{"id":1934,"href":"https:\/\/bppmg.pl\/index.php\/wp-json\/wp\/v2\/pages\/1929\/revisions\/1934"}],"wp:attachment":[{"href":"https:\/\/bppmg.pl\/index.php\/wp-json\/wp\/v2\/media?parent=1929"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}