{"id":2993,"date":"2019-10-31T02:09:00","date_gmt":"2019-10-31T02:09:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=2993"},"modified":"2019-09-20T03:27:40","modified_gmt":"2019-09-20T03:27:40","slug":"e-commerce-grid-to-full-screen-product-on-click","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/code\/e-commerce-grid-to-full-screen-product-on-click\/","title":{"rendered":"E-Commerce Grid to Full Screen Product on Click"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/09\/Expanding-Grid-On-Click.mp4\"><\/video><\/figure>\n\n\n\n<p>Today, we bring you a fancy\u00a0<a href=\"https:\/\/azoora.com\/blog\/tag\/e-commerce\/\">e-commerce<\/a>\u00a0grid layout\u00a0designed by <a href=\"https:\/\/dribbble.com\/filipslovacek\">Filip Slov\u00e1\u010dek<\/a> and coded by\u00a0<a rel=\"noreferrer noopener\" href=\"http:\/\/twitter.com\/crnacura\" target=\"_blank\">Mary Lou<\/a>. When you click on a product it scales up and\u00a0fills up the screen\u00a0with information about the product and you can click on the image flips over horizontally and zooms in.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"2996\" data-permalink=\"https:\/\/azoora.com\/blog\/code\/e-commerce-grid-to-full-screen-product-on-click\/attachment\/expanding-grid-on-click-01\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/09\/Expanding-Grid-On-Click-01.png\" data-orig-size=\"800,500\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Expanding-Grid-On-Click-01\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/09\/Expanding-Grid-On-Click-01-300x188.png\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/09\/Expanding-Grid-On-Click-01.png\" loading=\"lazy\" width=\"800\" height=\"500\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/09\/Expanding-Grid-On-Click-01.png\" alt=\"\" class=\"wp-image-2996\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/09\/Expanding-Grid-On-Click-01.png 800w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/09\/Expanding-Grid-On-Click-01-300x188.png 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/09\/Expanding-Grid-On-Click-01-768x480.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"2997\" data-permalink=\"https:\/\/azoora.com\/blog\/code\/e-commerce-grid-to-full-screen-product-on-click\/attachment\/expanding-grid-on-click-02\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/09\/Expanding-Grid-On-Click-02.png\" data-orig-size=\"800,500\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Expanding-Grid-On-Click-02\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/09\/Expanding-Grid-On-Click-02-300x188.png\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/09\/Expanding-Grid-On-Click-02.png\" loading=\"lazy\" width=\"800\" height=\"500\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/09\/Expanding-Grid-On-Click-02.png\" alt=\"\" class=\"wp-image-2997\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/09\/Expanding-Grid-On-Click-02.png 800w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/09\/Expanding-Grid-On-Click-02-300x188.png 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/09\/Expanding-Grid-On-Click-02-768x480.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-attachment-id=\"2995\" data-permalink=\"https:\/\/azoora.com\/blog\/code\/e-commerce-grid-to-full-screen-product-on-click\/attachment\/expanding-grid-on-click-03\/#main\" data-orig-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/09\/Expanding-Grid-On-Click-03.png\" data-orig-size=\"800,500\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Expanding-Grid-On-Click-03\" data-image-description=\"\" data-medium-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/09\/Expanding-Grid-On-Click-03-300x188.png\" data-large-file=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/09\/Expanding-Grid-On-Click-03.png\" loading=\"lazy\" width=\"800\" height=\"500\" src=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/09\/Expanding-Grid-On-Click-03.png\" alt=\"\" class=\"wp-image-2995\" srcset=\"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/09\/Expanding-Grid-On-Click-03.png 800w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/09\/Expanding-Grid-On-Click-03-300x188.png 300w, https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/09\/Expanding-Grid-On-Click-03-768x480.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p> You can find the project on\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/SaijoGeorge\/ExpandingGridItemAnimation\" target=\"_blank\">Github<\/a>.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><strong>Demo<\/strong>: <a href=\"https:\/\/tympanus.net\/Development\/ExpandingGridItemAnimation\/\">Link<\/a><\/p><p><strong>Tutorial<\/strong>: <a href=\"https:\/\/tympanus.net\/codrops\/2017\/11\/08\/expanding-grid-item-animation\/\">Link<\/a><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Today, we bring you a fancy\u00a0e-commerce\u00a0grid layout\u00a0designed by Filip Slov\u00e1\u010dek and coded by\u00a0Mary Lou. When you click on a product it scales up and\u00a0fills up the screen\u00a0with information about the product and you can click on the image flips over horizontally and zooms in. You can find the project on\u00a0Github. Demo: Link Tutorial: Link<\/p>\n","protected":false},"author":2,"featured_media":3002,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[4,12],"tags":[93,25,94,138,87],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/10\/Expanding-Grid-On-Click.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-Mh","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/2993"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=2993"}],"version-history":[{"count":2,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/2993\/revisions"}],"predecessor-version":[{"id":3004,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/2993\/revisions\/3004"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/3002"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=2993"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=2993"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=2993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}