{"id":2567,"date":"2022-03-19T11:32:43","date_gmt":"2022-03-19T10:32:43","guid":{"rendered":"https:\/\/digitalia.culturanuova.net\/blog\/?p=2567"},"modified":"2022-03-19T11:32:43","modified_gmt":"2022-03-19T10:32:43","slug":"center-v-and-h-an-expanded-element","status":"publish","type":"post","link":"https:\/\/digitalia.culturanuova.net\/blog\/?p=2567","title":{"rendered":"center (v and h) an expanded element"},"content":{"rendered":"\n<p>It is not easy to center vertically and horizontally an expanded element in a page.<\/p>\n\n\n\n<p>I found this code working for me:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.expansible {max-width: 10vw; \n    transition: all 1s; \n    transition:transform 0.25s ease;}\n.expanded {\n    max-width: 20vw;\n    transform:scale(2.6);\n    <strong>position: absolute;\n    left: 30%;\n    top: 25%;<\/strong>\n    outline:0;\n}    <\/code><\/pre>\n\n\n\n<p>The image is expended with this js code (put at the end of a file):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>document.querySelectorAll('img.expansible').forEach(imageElement => {\n  imageElement.addEventListener('click', e => {\n    e.preventDefault()\n    imageElement.classList.toggle('expanded')\n  })\n})<\/code><\/pre>\n\n\n\n<p>and adding the class <em>expansible<\/em> to the images you want expansible. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>It is not easy to center vertically and horizontally an expanded element in a page. I found this code working for me: The image is expended with this js code (put at the end of a file): and adding the class expansible to the images you want expansible.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[742,566],"tags":[612,629],"class_list":["post-2567","post","type-post","status-publish","format-standard","hentry","category-css-webmaster","category-webmaster","tag-center","tag-expansible"],"_links":{"self":[{"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2567","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2567"}],"version-history":[{"count":1,"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2567\/revisions"}],"predecessor-version":[{"id":2568,"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2567\/revisions\/2568"}],"wp:attachment":[{"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2567"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2567"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}