Interactive Blog Posts Gird with Kadence

interactivepostsgrid.txt

<!-- wp:kadence/column {"background":"#edf2f7","borderWidth":["","","",""],"uniqueID":"_7daf9b-9c","padding":[100,100,100,100],"borderStyle":[{"top":["","",""],"right":["","",""],"bottom":["","",""],"left":["","",""],"unit":"px"}],"kadenceBlockCSS":"selector .entry.loop-entry {\r\n  height: 400px;\r\n  border-radius: 10px;\r\n  overflow: hidden;\r\n  position: relative;\r\n  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;\r\n}\r\n\r\n/*Feature Image*/\r\nselector .wp-block-kadence-posts a.post-thumbnail {\r\n  border-radius: 10px;\r\n  position: relative;\r\n}\r\nselector .wp-block-kadence-posts a.post-thumbnail:before {\r\n  content: \u0022\u0022;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 999;\r\n  background: linear-gradient(\r\n    180deg,\r\n    rgba(255, 255, 255, 0) 37%,\r\n    rgb(0, 0, 0) 100%\r\n  );\r\n}\r\nselector .wp-block-kadence-posts a.post-thumbnail,\r\nselector .wp-block-kadence-posts .post-thumbnail-inner,\r\nselector .wp-block-kadence-posts .post-thumbnail-inner img {\r\n  height: 400px !important;\r\n}\r\n\r\n/*Post Content*/\r\nselector .wp-block-kadence-posts .entry-content-wrap {\r\n  padding: 20px !important;\r\n  position: absolute;\r\n  z-index: 999;\r\n  height: 400px;\r\n  width: 100%;\r\n  top: 0;\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  flex-direction: column;\r\n}\r\nselector .wp-block-kadence-posts .entry-content-wrap h2.entry-title a,\r\nselector .wp-block-kadence-posts .entry-content-wrap .entry-meta,\r\nselector .wp-block-kadence-posts .entry-content-wrap .entry-summary,\r\nselector .wp-block-kadence-posts .entry-content-wrap .entry-footer a {\r\n  color: #fff !important;\r\n}\r\nselector .wp-block-kadence-posts .entry-content-wrap header.entry-header, selector .wp-block-kadence-posts .entry-content-wrap .entry-meta {\r\n  margin-bottom: 0;\r\n}\r\nselector .wp-block-kadence-posts .entry-content-wrap .entry-summary p {\r\n  margin: 0;\r\n  font-size: 16px;\r\n}\r\nselector .wp-block-kadence-posts .entry-content-wrap .entry-summary {\r\n  margin-top: 10px;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n/*Hover Effect Styling*/\r\nselector .wp-block-kadence-posts .entry-content-wrap .entry-summary, selector .wp-block-kadence-posts .entry-content-wrap .entry-footer {\r\n  max-height: 0;\r\n  opacity: 0;\r\n  transition: all 1s ease-in-out;\r\n}\r\nselector .wp-block-kadence-posts .entry.loop-entry:hover .entry-summary, selector .wp-block-kadence-posts .entry.loop-entry:hover .entry-footer{\r\n  max-height: 100%;\r\n  opacity: 1;\r\n}"} -->
<div class="wp-block-kadence-column kadence-column_7daf9b-9c"><div class="kt-inside-inner-col"><!-- wp:kadence/posts {"uniqueID":"_65d2e1-16","postsToShow":3,"aboveCategories":false,"author":false,"excerptCustomLength":true,"excerptLength":25,"titleFont":[{"level":2,"size":["md","",""],"sizeType":"px","lineHeight":["","",""],"lineType":"px","letterSpacing":["","",""],"letterType":"px","textTransform":""}],"tabletColumns":2} /--></div></div>
<!-- /wp:kadence/column -->