{"id":2146,"date":"2020-10-17T08:27:38","date_gmt":"2020-10-17T06:27:38","guid":{"rendered":"https:\/\/digitalia.culturanuova.net\/blog\/?p=2146"},"modified":"2020-10-28T10:24:52","modified_gmt":"2020-10-28T09:24:52","slug":"on-click-expansible-image","status":"publish","type":"post","link":"https:\/\/digitalia.culturanuova.net\/blog\/?p=2146","title":{"rendered":"on-click expansible image"},"content":{"rendered":"\n<p>We were looking for the simplest possible solution to enlarge an image on click, without javascript and with the least amount of code possible.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">a first attempt<\/h3>\n\n\n\n<p>At first we found the pseudo-class focus as a solution: with this <b>css<\/b> code <code>img:focus<\/code> and in <b>html<\/b> (inside the img tag) <code>tabindex=\"0\"<\/code>.<\/p>\n\n\n\n<p>In this way, the image expanded on click, but to make it return to the initial size, it was necessary to click outside the enlarged image. As in the following example:<\/p>\n\n\n\n<style type=\"text\/css\">\nimg {\n    max-width: 200px;\n    transition: all 1s;\n    transition:transform 0.25s ease;\n}\nimg#onlyfocus:focus {\n    max-width: none;\n    transform:scale(2.8);\n    position: relative;\n    left: -5%;\n    outline:0;\n}\n<\/style>\n<img decoding=\"async\" id=\"onlyfocus\" tabindex=\"0\" src=\"https:\/\/localhost\/web\/public_html\/mondodigitale\/wordpress\/wp-content\/uploads\/2020\/05\/Zamboni-paesaggio-con-alberi-855x1024.jpg\" width=\"200px\">\n\n\n\n<h3 class=\"wp-block-heading\">an important step<\/h3>\n\n\n\n<p>Therefore we had to add other code, so that we could return to the original, small, size, clicking <em>inside<\/em> the image.  We had to use the <strong>input<\/strong> tag.<\/p>\n\n\n\n<style type=\"text\/css\">\ninput:checked + label > img {max-width: 200px; transform:scale(1.0); left: 0px;}\ninput {display: none;}\nimg {\n    max-width: 200px;\n    transition: all 1s;\n    transition:transform 0.25s ease;\n}\n\nimg:focus {\n    max-width: none;\n    transform:scale(2.8);\n    position: relative;\n    left: 5%;\n    outline:0;\n}\n<\/style>\n<p>This is the result:<\/p>\n<input type=\"checkbox\" checked=\"\" id=\"myimage\">\n<label for=\"myimage\">\n<img decoding=\"async\" tabindex=\"0\" src=\"https:\/\/localhost\/web\/public_html\/mondodigitale\/wordpress\/wp-content\/uploads\/2020\/05\/Zamboni-paesaggio-con-alberi-855x1024.jpg\" width=\"200px\">\n<\/label>\n\n\n\n<p>This is the code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style type=\"text\/css\">\ninput:checked + label > img {max-width: 200px; transform:scale(1.0); left: 0px;}\ninput {display: none;}\nimg {\n    max-width: 200px;\n    transition: all 1s;\n    transition:transform 0.25s ease;\n}\n\nimg:focus {\n    max-width: none;\n    transform:scale(2.8);\n    position: relative;\n    left: 5%;\n    outline:0;\n}\n&lt;\/style>\n&lt;p>This the result:&lt;\/p>\n&lt;input type=\"checkbox\" checked id=\"myimage\" \/>\n&lt;label for=\"myimage\">\n&lt;img tabindex=\"0\" src=\"path-to-my-image\/myimage.jpg\" width=\"200px\" \/>\n&lt;\/label><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">fine tuning: adding an image map<\/h3>\n\n\n\n<p>We speak about this new feature in <a href=\"https:\/\/localhost\/web\/public_html\/mondodigitale\/wordpress\/?p=2167\">another article<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We were looking for the simplest possible solution to enlarge an image on click, without javascript and with the least amount of code possible. a first attempt At first we found the pseudo-class focus as a solution: with this css code img:focus and in html (inside the img tag) tabindex=&#8221;0&#8243;. In this way, the image &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/digitalia.culturanuova.net\/blog\/?p=2146\" class=\"more-link\">Leggi tutto<span class=\"screen-reader-text\"> &#8220;on-click expansible image&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[566],"tags":[532,629,145,245,630],"class_list":["post-2146","post","type-post","status-publish","format-standard","hentry","category-webmaster","tag-expand-collapse","tag-expansible","tag-image","tag-javascript","tag-on-click"],"_links":{"self":[{"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2146","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=2146"}],"version-history":[{"count":20,"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2146\/revisions"}],"predecessor-version":[{"id":2173,"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2146\/revisions\/2173"}],"wp:attachment":[{"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2146"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2146"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/digitalia.culturanuova.net\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}