{"id":166,"date":"2025-09-13T13:50:32","date_gmt":"2025-09-13T12:50:32","guid":{"rendered":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/queryloop\/?page_id=166"},"modified":"2026-01-07T11:18:04","modified_gmt":"2026-01-07T11:18:04","slug":"grid-covers-with-css","status":"publish","type":"page","link":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/queryloop\/home\/grid-covers-with-css\/","title":{"rendered":"Grid Covers with CSS"},"content":{"rendered":"\n<p>This makes the whole image a link, not just the text. Currently not working&#8230;<\/p>\n\n\n\n<p>On this page we have edited the query loop, removed the Featured image and added a cover block showing the featured image. We have add the Title &amp; date inside the cover block. We grouped the cover block and added a background image to the group. This shows up if there is no featured image.<\/p>\n\n\n\n<p>Added a css fragment, the cover block has a class of <em>expand-link<\/em>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> .expand-link a::after{\ncontent: \" \";\nposition: absolute; cursor: pointer; top: 0; left: 0;\nwidth: 100%; height: 100%;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-query alignwide is-layout-flow wp-block-query-is-layout-flow\"><ul class=\"columns-3 wp-block-post-template is-layout-grid wp-container-core-post-template-is-layout-125c70a0 wp-block-post-template-is-layout-grid\"><li class=\"wp-block-post post-17 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized\">\n\n<div style=\"background-image:url(&#039;https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14134846\/bw-1200.png&#039;);background-size:cover;\" class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained has-background\">\n<div class=\"wp-block-cover is-light has-custom-content-position is-position-bottom-center expand-link has-aspect-ratio\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;aspect-ratio:1;min-height:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-0 has-background-dim\" style=\"background-color:#4e84c8\"><\/span><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"900\" src=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14132802\/2024-10-17-09-19-48.jpeg\" class=\"wp-block-cover__image-background wp-post-image\" alt=\"Two Ravens in a blue sky\" data-object-fit=\"cover\" srcset=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14132802\/2024-10-17-09-19-48.jpeg 1200w, https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14132802\/2024-10-17-09-19-48-300x225.jpeg 300w, https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14132802\/2024-10-17-09-19-48-1024x768.jpeg 1024w, https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14132802\/2024-10-17-09-19-48-768x576.jpeg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><div class=\"wp-block-cover__inner-container has-global-padding is-layout-constrained wp-container-core-cover-is-layout-91436d4e wp-block-cover-is-layout-constrained\"><h2 class=\"has-text-align-center has-link-color wp-elements-c8d9fe987a8f14ef962a5d99dc60d7f1 wp-block-post-title\"><a href=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/queryloop\/2024\/12\/14\/example-3\/\" target=\"_self\" >In the Blue<\/a><\/h2><\/div><\/div>\n<\/div>\n\n<\/li><li class=\"wp-block-post post-16 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized\">\n\n<div style=\"background-image:url(&#039;https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14134846\/bw-1200.png&#039;);background-size:cover;\" class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained has-background\">\n<div class=\"wp-block-cover is-light has-custom-content-position is-position-bottom-center expand-link has-aspect-ratio\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;aspect-ratio:1;min-height:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-0 has-background-dim\" style=\"background-color:#4e84c8\"><\/span><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"900\" src=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14132817\/2024-10-17-08-46-01.jpeg\" class=\"wp-block-cover__image-background wp-post-image\" alt=\"hill in sunlight &amp; cloud\" data-object-fit=\"cover\" srcset=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14132817\/2024-10-17-08-46-01.jpeg 1200w, https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14132817\/2024-10-17-08-46-01-300x225.jpeg 300w, https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14132817\/2024-10-17-08-46-01-1024x768.jpeg 1024w, https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14132817\/2024-10-17-08-46-01-768x576.jpeg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><div class=\"wp-block-cover__inner-container has-global-padding is-layout-constrained wp-container-core-cover-is-layout-91436d4e wp-block-cover-is-layout-constrained\"><h2 class=\"has-text-align-center has-link-color wp-elements-c8d9fe987a8f14ef962a5d99dc60d7f1 wp-block-post-title\"><a href=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/queryloop\/2024\/12\/14\/example-2\/\" target=\"_self\" >Sunlight &amp; Shade<\/a><\/h2><\/div><\/div>\n<\/div>\n\n<\/li><li class=\"wp-block-post post-20 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized\">\n\n<div style=\"background-image:url(&#039;https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14134846\/bw-1200.png&#039;);background-size:cover;\" class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained has-background\">\n<div class=\"wp-block-cover is-light has-custom-content-position is-position-bottom-center expand-link has-aspect-ratio\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;aspect-ratio:1;min-height:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-0 has-background-dim\" style=\"background-color:#4e84c8\"><\/span><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"900\" src=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14132808\/2024-10-17-10-51-33.jpeg\" class=\"wp-block-cover__image-background wp-post-image\" alt=\"craneflyies in the grass\" data-object-fit=\"cover\" srcset=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14132808\/2024-10-17-10-51-33.jpeg 1200w, https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14132808\/2024-10-17-10-51-33-300x225.jpeg 300w, https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14132808\/2024-10-17-10-51-33-1024x768.jpeg 1024w, https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14132808\/2024-10-17-10-51-33-768x576.jpeg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><div class=\"wp-block-cover__inner-container has-global-padding is-layout-constrained wp-container-core-cover-is-layout-91436d4e wp-block-cover-is-layout-constrained\"><h2 class=\"has-text-align-center has-link-color wp-elements-c8d9fe987a8f14ef962a5d99dc60d7f1 wp-block-post-title\"><a href=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/queryloop\/2024\/12\/14\/example-6\/\" target=\"_self\" >Craneflies<\/a><\/h2><\/div><\/div>\n<\/div>\n\n<\/li><li class=\"wp-block-post post-19 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized\">\n\n<div style=\"background-image:url(&#039;https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14134846\/bw-1200.png&#039;);background-size:cover;\" class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained has-background\">\n<div class=\"wp-block-cover is-light has-custom-content-position is-position-bottom-center expand-link has-aspect-ratio\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;aspect-ratio:1;min-height:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-0 has-background-dim\" style=\"background-color:#4e84c8\"><\/span><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"900\" src=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14132804\/2024-10-17-10-02-20.jpeg\" class=\"wp-block-cover__image-background wp-post-image\" alt=\"trig point in the mist\" data-object-fit=\"cover\" srcset=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14132804\/2024-10-17-10-02-20.jpeg 1200w, https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14132804\/2024-10-17-10-02-20-300x225.jpeg 300w, https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14132804\/2024-10-17-10-02-20-1024x768.jpeg 1024w, https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14132804\/2024-10-17-10-02-20-768x576.jpeg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><div class=\"wp-block-cover__inner-container has-global-padding is-layout-constrained wp-container-core-cover-is-layout-91436d4e wp-block-cover-is-layout-constrained\"><h2 class=\"has-text-align-center has-link-color wp-elements-c8d9fe987a8f14ef962a5d99dc60d7f1 wp-block-post-title\"><a href=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/queryloop\/2024\/12\/14\/example-5\/\" target=\"_self\" >Trig Point<\/a><\/h2><\/div><\/div>\n<\/div>\n\n<\/li><li class=\"wp-block-post post-18 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized\">\n\n<div style=\"background-image:url(&#039;https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14134846\/bw-1200.png&#039;);background-size:cover;\" class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained has-background\">\n<div class=\"wp-block-cover is-light has-custom-content-position is-position-bottom-center expand-link has-aspect-ratio\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;aspect-ratio:1;min-height:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-0 has-background-dim\" style=\"background-color:#4e84c8\"><\/span><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"900\" src=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14132807\/2024-10-17-10-14-34.jpeg\" class=\"wp-block-cover__image-background wp-post-image\" alt=\"two small mushrooms in moss\" data-object-fit=\"cover\" srcset=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14132807\/2024-10-17-10-14-34.jpeg 1200w, https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14132807\/2024-10-17-10-14-34-300x225.jpeg 300w, https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14132807\/2024-10-17-10-14-34-1024x768.jpeg 1024w, https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14132807\/2024-10-17-10-14-34-768x576.jpeg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><div class=\"wp-block-cover__inner-container has-global-padding is-layout-constrained wp-container-core-cover-is-layout-91436d4e wp-block-cover-is-layout-constrained\"><h2 class=\"has-text-align-center has-link-color wp-elements-c8d9fe987a8f14ef962a5d99dc60d7f1 wp-block-post-title\"><a href=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/queryloop\/2024\/12\/14\/example-4\/\" target=\"_self\" >Fungi &amp; Moss<\/a><\/h2><\/div><\/div>\n<\/div>\n\n<\/li><li class=\"wp-block-post post-39 post type-post status-publish format-standard hentry category-uncategorized\">\n\n<div style=\"background-image:url(&#039;https:\/\/blogs.glowscotland.org.uk\/glowblogs\/public\/queryloop\/uploads\/sites\/10798\/2024\/12\/14134846\/bw-1200.png&#039;);background-size:cover;\" class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained has-background\">\n<div class=\"wp-block-cover is-light has-custom-content-position is-position-bottom-center expand-link has-aspect-ratio\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;aspect-ratio:1;min-height:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-0 has-background-dim\" style=\"background-color:#4e84c8\"><\/span><div class=\"wp-block-cover__inner-container has-global-padding is-layout-constrained wp-container-core-cover-is-layout-91436d4e wp-block-cover-is-layout-constrained\"><h2 class=\"has-text-align-center has-link-color wp-elements-c8d9fe987a8f14ef962a5d99dc60d7f1 wp-block-post-title\"><a href=\"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/queryloop\/2024\/12\/14\/example-no-featured-image\/\" target=\"_self\" >Example No Featured Image<\/a><\/h2><\/div><\/div>\n<\/div>\n\n<\/li><\/ul>\n\n<nav class=\"aligncenter wp-block-query-pagination is-layout-flex wp-block-query-pagination-is-layout-flex\" aria-label=\"Pagination\">\n\n\n<div class=\"wp-block-query-pagination-numbers\"><span aria-current=\"page\" class=\"page-numbers current\">1<\/span>\n<a class=\"page-numbers\" href=\"?query-0-page=2\">2<\/a><\/div>\n\n<a href=\"\/glowblogs\/queryloop\/wp-json\/wp\/v2\/pages\/166?query-0-page=2\" class=\"wp-block-query-pagination-next\">Next Page<span class='wp-block-query-pagination-next-arrow is-arrow-chevron' aria-hidden='true'>\u00bb<\/span><\/a>\n<\/nav>\n\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This makes the whole image a link, not just the text. Currently not working&#8230; On this page we have edited the query loop, removed the Featured image and added a cover block showing the featured image. We have add the Title &amp; date inside the cover block. We grouped the cover block and added a [&hellip;]<\/p>\n","protected":false},"author":22,"featured_media":59,"parent":51,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-166","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/queryloop\/wp-json\/wp\/v2\/pages\/166","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/queryloop\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/queryloop\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/queryloop\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/queryloop\/wp-json\/wp\/v2\/comments?post=166"}],"version-history":[{"count":8,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/queryloop\/wp-json\/wp\/v2\/pages\/166\/revisions"}],"predecessor-version":[{"id":222,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/queryloop\/wp-json\/wp\/v2\/pages\/166\/revisions\/222"}],"up":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/queryloop\/wp-json\/wp\/v2\/pages\/51"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/queryloop\/wp-json\/wp\/v2\/media\/59"}],"wp:attachment":[{"href":"https:\/\/blogs.glowscotland.org.uk\/glowblogs\/queryloop\/wp-json\/wp\/v2\/media?parent=166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}