{"id":2799,"date":"2022-06-13T08:40:44","date_gmt":"2022-06-13T08:40:44","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=2799"},"modified":"2023-06-10T11:36:55","modified_gmt":"2023-06-10T11:36:55","slug":"css-tutorial-zooming-images-in-a-grid-layout","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-zooming-images-in-a-grid-layout\/","title":{"rendered":"CSS Tutorial &#8211; Zooming Images in a Grid Layout"},"content":{"rendered":"<p>Creating a grid of images is easy, thanks to CSS Grid. But making the grid do fancy things after the images have been placed can be tricky to pull off.<\/p>\n<p>Say you want to add some fancy hover effect to the images where they grow and zoom beyond the rows and columns where they sit? We can do that!<\/p>\n<p><iframe style=\"width: 100%;\" title=\"CSS Tutorial - CSS Colors - CSS Color Names\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/jOzpYQZ?default-tab=result&amp;theme-id=dark\" height=\"500px\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/jOzpYQZ\"><br \/>\nCSS Tutorial &#8211; CSS Colors &#8211; CSS Color Names<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>Cool, right? If you check the code, you won\u2019t find any JavaScript, complex selectors, or even\u00a0<a href=\"https:\/\/css-tricks.com\/magic-numbers-in-css\/\">magic numbers<\/a>. And this is only one example among many we will explore!<\/p>\n<p>Now, you know all the secrets to create any kind of image grid with a cool hover effect while also having control of the sizing you want using the math we just covered.<\/p>\n<h2><span style=\"color: #ef3207;\">CSS<\/span><\/h2>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.gallery {\r\n  --s: 150px; \/* control the size *\/\r\n  --g: 10px; \/* control the gap *\/\r\n  --f: 1.5; \/* control the scale factor *\/\r\n\r\n  display: grid;\r\n  gap: var(--g);\r\n  width: calc(3 * var(--s) + 2 * var(--g));\r\n  aspect-ratio: 1;\r\n  grid-template-columns: repeat(3, auto);\r\n}\r\n\r\n.gallery &gt; img {\r\n  width: 0;\r\n  height: 0;\r\n  min-height: 100%;\r\n  min-width: 100%;\r\n  object-fit: cover;\r\n  cursor: pointer;\r\n  filter: grayscale(80%);\r\n  transition: 0.35s linear;\r\n}\r\n\r\n.gallery img:hover {\r\n  filter: grayscale(0);\r\n  width: calc(var(--s) * var(--f));\r\n  height: calc(var(--s) * var(--f));\r\n}\r\n\r\nbody {\r\n  margin: 0;\r\n  min-height: 100vh;\r\n  display: grid;\r\n  place-content: center;\r\n  background: #31A7FF;\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Creating a grid of images is easy, thanks to CSS Grid. But <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/css-tutorial-zooming-images-in-a-grid-layout\/\" title=\"CSS Tutorial &#8211; Zooming Images in a Grid Layout\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3739,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,2],"tags":[200,199,197,198],"newstopic":[],"class_list":{"0":"post-2799","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"category-web-design","9":"tag-css-code","10":"tag-css-grid-layout","11":"tag-css-tutorial","12":"tag-css-zooming-images"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2799","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=2799"}],"version-history":[{"count":5,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2799\/revisions"}],"predecessor-version":[{"id":2802,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2799\/revisions\/2802"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3739"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=2799"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=2799"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=2799"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=2799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}