{"id":49404,"date":"2016-12-04T18:03:23","date_gmt":"2016-12-04T18:03:23","guid":{"rendered":"https:\/\/the7.io\/main\/?page_id=49404"},"modified":"2016-12-04T18:03:23","modified_gmt":"2016-12-04T18:03:23","slug":"9-blog-masonry-background-overlay","status":"publish","type":"page","link":"https:\/\/steubenvillegrocerybox.com\/blog\/blog-masonry\/9-blog-masonry-background-overlay\/","title":{"rendered":"9. Blog masonry &#8211; background overlay"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column]<style type=\"text\/css\" data-type=\"the7_shortcodes-inline-css\">.gradient-overlay-layout-list .post-head-wrapper,\n.gradient-overlay-layout-list .post-entry-wrapper {\n  position: absolute;\n  top: 50%;\n  left: 20px;\n  right: 20px;\n  transition: opacity 0.4s, transform 0.4s;\n  transform: translate3d(0,-50%,0);\n  transform-origin: 50%;\n}\n.gradient-overlay-layout-list .post-entry-content {\n  -webkit-backface-visibility: hidden;\n  transform: translatez(0);\n}\n.gradient-overlay-layout-list .post-entry-wrapper {\n  opacity: 0;\n  transition: opacity 0.35s, transform 0.35s;\n  transform: translate3d(0,-50%,0) scale3d(0.8,0.8,1);\n}\n.gradient-overlay-layout-list:not(.disable-layout-hover) article:hover .post-head-wrapper {\n  opacity: 0;\n  transform: translate3d(0,-50%,0) scale3d(0.8,0.8,1);\n}\n.gradient-overlay-layout-list:not(.disable-layout-hover) article:hover .post-entry-wrapper {\n  transform: translate3d(0,-50%,0) scale3d(1,1,1);\n  opacity: 1;\n  transition-delay: 0.1s;\n}\n#page .blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c.gradient-overlay-layout-list.enable-bg-rollover .post-entry-content {\n  background: rgba(0,0,0,0.5);\n  box-shadow: none;\n  background: -webkit-linear-gradient();\n  background: linear-gradient();\n}\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c.gradient-overlay-layout-list:not(.portfolio-shortcode):not(.albums-shortcode) .post-entry-content {\n  top: 0px;\n  right: 0px;\n  bottom: 0px;\n  left: 0px;\n}\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c.gradient-overlay-layout-list .post-head-wrapper,\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c.gradient-overlay-layout-list .post-entry-wrapper {\n  right: 30px;\n  left: 30px;\n}\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .filter-bg-decoration .filter-categories a.act {\n  color: #fff;\n}\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c:not(.mode-masonry) article:first-of-type,\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c:not(.mode-masonry) article.visible.first:not(.product) {\n  margin-top: 0;\n}\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c.dividers-on:not(.mode-masonry) article {\n  margin-top: 0;\n}\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c.dividers-on:not(.mode-masonry) article:first-of-type,\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c.dividers-on:not(.mode-masonry) article.visible.first:not(.product) {\n  margin-top: 0;\n  padding-top: 0;\n}\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .post-thumbnail-wrap {\n  padding: 0px 0px 0px 0px;\n}\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c.enable-bg-rollover .post-thumbnail-rollover:after {\n  background: rgba(0,0,0,0.5);\n  box-shadow: none;\n  background: -webkit-linear-gradient();\n  background: linear-gradient();\n}\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .gallery-zoom-ico {\n  width: 44px;\n  height: 44px;\n  line-height: 44px;\n  border-radius: 100px;\n  margin: -22px 0 0 -22px;\n  border-width: 0px;\n  color: #ffffff;\n}\n.bottom-overlap-layout-list.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .gallery-zoom-ico {\n  margin-top: -72px;\n}\n.gradient-overlay-layout-list.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .gallery-zoom-ico,\n.content-rollover-layout-list.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .gallery-zoom-ico {\n  margin: 0 0 10px;\n}\n.content-align-center.gradient-overlay-layout-list.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .gallery-zoom-ico,\n.content-align-center.content-rollover-layout-list.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .gallery-zoom-ico {\n  margin: 0 auto 10px;\n}\n.dt-icon-bg-on.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .gallery-zoom-ico {\n  background: rgba(255,255,255,0.3);\n  box-shadow: none;\n}\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .gallery-zoom-ico > span,\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .gallery-zoom-ico:before {\n  font-size: 32px;\n  line-height: 44px;\n}\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .gallery-zoom-ico > span,\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .gallery-zoom-ico:before {\n  color: #ffffff;\n}\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .entry-title,\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c.owl-carousel .entry-title {\n  margin-bottom: 10px;\n  font-size: 24px;\n  line-height: 34px;\n  font-weight: bold;\n}\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .entry-title a,\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c.owl-carousel .entry-title a {\n  color: #ffffff;\n}\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .entry-meta {\n  margin-bottom: 0px;\n}\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .entry-meta * {\n  color: rgba(255,255,255,0.5);\n  font-weight: bold;\n  text-transform: uppercase;\n}\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .portfolio-categories {\n  margin-bottom: 0px;\n}\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .entry-meta > a:after,\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .entry-meta > span:after {\n  background: rgba(255,255,255,0.5);\n  box-shadow: none;\n}\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .entry-excerpt {\n  margin-bottom: 5px;\n}\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .entry-excerpt * {\n  color: #ffffff;\n}\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c:not(.centered-layout-list) .post-entry-content {\n  padding: 50px 30px 50px 30px;\n}\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c:not(.centered-layout-list):not(.content-bg-on):not(.mode-list) .no-img .post-entry-content {\n  padding: 0;\n}\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .post-details.details-type-link,\n.blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .post-details.details-type-link * {\n  color: #ffffff;\n}\n@media screen and (max-width: ) {\n  .blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c article {\n    -ms-flex-flow: column nowrap;\n    flex-flow: column nowrap;\n    margin-top: 20px;\n  }\n  .blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c.dividers-on article {\n    border: none;\n  }\n  .blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c.content-bg-on.centered-layout-list article {\n    padding: 0;\n  }\n  .blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c.blog-shortcode.dividers-on article,\n  .blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c.dividers-on.classic-layout-list article {\n    margin-top: 20px;\n    padding: 0;\n  }\n  .blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c.blog-shortcode.dividers-on article:first-of-type,\n  .blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c.dividers-on.classic-layout-list article:first-of-type {\n    padding: 0;\n  }\n  #page .blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .post-thumbnail-wrap,\n  #page .blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .post-entry-content {\n    width: 100%;\n    margin: 0;\n    top: 0;\n  }\n  #page .blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .post-thumbnail-wrap {\n    padding: 0;\n  }\n  #page .blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .post-entry-content:after {\n    display: none;\n  }\n  #page .blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .project-even .post-thumbnail-wrap,\n  #page .blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c.centered-layout-list .post-thumbnail-wrap {\n    -ms-flex-order: 0;\n    order: 0;\n  }\n  #page .blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c.centered-layout-list .post-entry-title-content {\n    -ms-flex-order: 1;\n    order: 1;\n    width: 100%;\n    padding: 20px 20px 0;\n  }\n  #page .blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c.centered-layout-list .post-entry-content {\n    -ms-flex-order: 2;\n    order: 2;\n    padding-top: 0;\n  }\n  #page .blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .fancy-categories {\n    top: 10px;\n    left: 10px;\n    bottom: auto;\n    right: auto;\n  }\n  #page .blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .fancy-date a {\n    top: 10px;\n    right: 10px;\n    left: auto;\n    bottom: auto;\n  }\n  #page .blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .post-entry-content {\n    padding: 20px;\n  }\n  #page .blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .entry-title {\n    margin: 3px 0 5px;\n    font-size: 20px;\n    line-height: 26px;\n  }\n  #page .blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .entry-meta {\n    margin: 5px 0 5px;\n  }\n  #page .blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .entry-excerpt {\n    margin: 15px 0 0;\n  }\n  #page .blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .post-details {\n    margin: 5px 0 10px;\n  }\n  #page .blog-shortcode.blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c .post-details.details-type-link {\n    margin-bottom: 2px;\n  }\n}\n<\/style><div class=\"blog-shortcode blog-masonry-shortcode-id-f71bab4d0dfdafcef23bf0f0cbde877c mode-masonry gradient-overlay-layout-list content-bg-on jquery-filter lazy-loading-mode content-align-center scale-img enable-bg-rollover dt-icon-bg-off resize-by-browser-width loading-effect-none description-on-hover\" data-padding=\"15px\" data-cur-page=\"1\" data-post-limit=\"10\" data-pagination-mode=\"load-more\" data-desktop-columns-num=\"3\" data-v-tablet-columns-num=\"2\" data-h-tablet-columns-num=\"2\" data-phone-columns-num=\"1\" data-width=\"0px\" data-columns=\"0\"><div class=\"iso-container\" ><\/div><!-- iso-container|iso-grid --><div class=\"paginator paginator-more-button\">\n\t\t\t\t<a class=\"button-load-more \" href=\"javascript:void(0);\" data-dt-page=\"1\" ><span class=\"stick\"><\/span><span class=\"stick\"><\/span><span class=\"stick\"><\/span><span class=\"button-caption\">Load more<\/span><\/a>\n\t\t\t<\/div><\/div>[\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column][\/vc_column][\/vc_row]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":49239,"menu_order":90,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-49404","page","type-page","status-publish","hentry","description-off"],"_links":{"self":[{"href":"https:\/\/steubenvillegrocerybox.com\/wp-json\/wp\/v2\/pages\/49404","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/steubenvillegrocerybox.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/steubenvillegrocerybox.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/steubenvillegrocerybox.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/steubenvillegrocerybox.com\/wp-json\/wp\/v2\/comments?post=49404"}],"version-history":[{"count":0,"href":"https:\/\/steubenvillegrocerybox.com\/wp-json\/wp\/v2\/pages\/49404\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/steubenvillegrocerybox.com\/wp-json\/wp\/v2\/pages\/49239"}],"wp:attachment":[{"href":"https:\/\/steubenvillegrocerybox.com\/wp-json\/wp\/v2\/media?parent=49404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}