{"id":15808,"date":"2014-05-20T14:27:11","date_gmt":"2014-05-20T14:27:11","guid":{"rendered":"https:\/\/the7.io\/main\/?page_id=15808"},"modified":"2019-07-13T18:12:40","modified_gmt":"2019-07-13T10:12:40","slug":"4-portfolio-grid-background-overlap","status":"publish","type":"page","link":"https:\/\/www.yibo.net\/?page_id=15808","title":{"rendered":"Showcase"},"content":{"rendered":"<p>[vc_row][vc_column]<style type=\"text\/css\" data-type=\"the7_shortcodes-inline-css\">.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.bottom-overlap-layout-list .post-entry-content {\n  margin-top: -100px;\n  width: 72%;\n}\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.bottom-overlap-layout-list:not(.mode-list) .no-img .post-entry-content {\n  margin-top: 0;\n  width: 100%;\n}\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.bottom-overlap-layout-list.mode-list .no-img .post-entry-content {\n  margin-top: 0;\n}\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2 .filter-bg-decoration .filter-categories a.act {\n  color: #fff;\n}\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2:not(.mode-masonry) article:first-of-type,\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2:not(.mode-masonry) article.visible.first {\n  margin-top: 0;\n}\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.dividers-on:not(.mode-masonry) article {\n  margin-top: 0;\n}\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.dividers-on:not(.mode-masonry) article:first-of-type,\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.dividers-on:not(.mode-masonry) article.visible.first {\n  margin-top: 0;\n  padding-top: 0;\n}\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.hover-scale article:after {\n  background: -webkit-linear-gradient();\n  background: linear-gradient();\n}\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.gradient-overlay-layout-list article {\n  border-radius: 0px;\n}\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2 .post-thumbnail-wrap {\n  padding: 0px 0px 0px 0px;\n  border-radius: 0px;\n}\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2 .post-thumbnail-wrap *,\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2 .post-thumbnail-rollover:after {\n  border-radius: 0px;\n}\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.enable-bg-rollover .post-thumbnail-rollover:after {\n  background: -webkit-linear-gradient();\n  background: linear-gradient();\n}\n.bottom-overlap-layout-list.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2 .project-links-container {\n  height: calc(100% - 100px);\n}\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2 .project-links-container a {\n  width: 46px;\n  height: 46px;\n  line-height: 46px;\n  border-radius: 100px;\n  margin: 10px 5px 10px;\n}\n.content-rollover-layout-list:not(.content-align-center).portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2 .project-links-container a,\n.gradient-overlay-layout-list:not(.content-align-center).portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2 .project-links-container a {\n  margin: 10px 10px 10px 0;\n}\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2 .project-links-container a:before,\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2 .project-links-container a:after {\n  border-width: 0px;\n}\n.dt-icon-bg-on.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2 .project-links-container a:before {\n  background: #ffffff;\n  -webkit-box-shadow: none;\n  box-shadow: none;\n}\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2 .project-links-container a > span:before {\n  font-size: 16px;\n  line-height: 46px;\n}\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2 .project-links-container a:hover > span {\n  color: #ffffff;\n}\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2 .entry-title,\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.owl-carousel .entry-title {\n  margin-bottom: 5px;\n  font-weight: bold;\n}\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2 .entry-meta {\n  margin-bottom: 15px;\n}\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2 .portfolio-categories {\n  margin-bottom: 15px;\n}\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2 .entry-excerpt {\n  margin-bottom: 5px;\n}\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2:not(.centered-layout-list) .post-entry-content {\n  padding: 25px 30px 30px 30px;\n}\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2:not(.centered-layout-list):not(.content-bg-on):not(.mode-list) .no-img .post-entry-content {\n  padding: 0;\n}\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.gradient-overlay-layout-list .post-entry-content {\n  border-radius: 0px;\n}\n@media screen and (max-width: ) {\n  .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2 article {\n    -webkit-flex-flow: column nowrap;\n    -moz-flex-flow: column nowrap;\n    -ms-flex-flow: column nowrap;\n    flex-flow: column nowrap;\n    margin-top: 20px;\n  }\n  .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.dividers-on article {\n    border: none;\n  }\n  .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.content-bg-on.centered-layout-list article {\n    padding: 0;\n  }\n  #page .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2 .post-thumbnail-wrap,\n  #page .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2 .post-entry-content {\n    width: 100%;\n    margin: 0;\n    top: 0;\n  }\n  #page .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2 .post-thumbnail-wrap {\n    padding: 0;\n  }\n  #page .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2 .post-entry-content:after {\n    display: none;\n  }\n  #page .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2 .project-even .post-thumbnail-wrap,\n  #page .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.centered-layout-list .post-thumbnail-wrap {\n    -webkit-order: 0;\n    -moz-order: 0;\n    -ms-flex-order: 0;\n    order: 0;\n  }\n  #page .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.centered-layout-list .post-entry-title-content {\n    -webkit-order: 1;\n    -moz-order: 1;\n    -ms-flex-order: 1;\n    order: 1;\n    width: 100%;\n    padding: 20px 20px 0;\n  }\n  #page .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.centered-layout-list .post-entry-content {\n    -webkit-order: 2;\n    -moz-order: 2;\n    -ms-flex-order: 2;\n    order: 2;\n    padding-top: 0;\n  }\n  #page .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2 .post-entry-content {\n    padding: 20px;\n  }\n  #page .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2 .entry-title {\n    margin: 3px 0 5px;\n    font-size: 20px;\n    line-height: 26px;\n  }\n  #page .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2 .entry-meta {\n    margin: 5px 0 5px;\n  }\n  #page .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2 .entry-excerpt {\n    margin: 15px 0 0;\n  }\n  #page .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2 .post-details {\n    margin: 5px 0 10px;\n  }\n  #page .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2 .post-details.details-type-link {\n    margin-bottom: 2px;\n  }\n}\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2:not(.resize-by-browser-width) .dt-css-grid {\n  grid-row-gap: 50px;\n  grid-column-gap: 50px;\n  grid-template-columns: repeat(auto-fill,minmax(,1fr));\n}\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2:not(.resize-by-browser-width) .dt-css-grid .double-width {\n  grid-column: span 2;\n}\n.cssgridlegacy.no-cssgrid .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2:not(.resize-by-browser-width) .dt-css-grid,\n.no-cssgridlegacy.no-cssgrid .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2:not(.resize-by-browser-width) .dt-css-grid {\n  display: flex;\n  flex-flow: row wrap;\n  margin: -25px;\n}\n.cssgridlegacy.no-cssgrid .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2:not(.resize-by-browser-width) .dt-css-grid .wf-cell,\n.no-cssgridlegacy.no-cssgrid .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2:not(.resize-by-browser-width) .dt-css-grid .wf-cell {\n  flex: 1 0 ;\n  max-width: 100%;\n  padding: 25px;\n  box-sizing: border-box;\n}\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.resize-by-browser-width .dt-css-grid {\n  grid-template-columns: repeat(2,1fr);\n  grid-template-rows: auto;\n  grid-column-gap: 50px;\n  grid-row-gap: 50px;\n}\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.resize-by-browser-width .dt-css-grid .double-width {\n  grid-column: span 2;\n}\n.cssgridlegacy.no-cssgrid .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.resize-by-browser-width .dt-css-grid {\n  margin: -25px;\n}\n.cssgridlegacy.no-cssgrid .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.resize-by-browser-width .dt-css-grid .wf-cell {\n  width: 50%;\n  padding: 25px;\n}\n.cssgridlegacy.no-cssgrid .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.resize-by-browser-width .dt-css-grid .wf-cell.double-width {\n  width: calc(50%) * 2;\n}\n.portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.resize-by-browser-width:not(.centered-layout-list):not(.content-bg-on) .dt-css-grid {\n  grid-row-gap: 20px;\n}\n@media screen and (max-width: 1199px) {\n  .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.resize-by-browser-width .dt-css-grid {\n    grid-template-columns: repeat(2,1fr);\n  }\n  .cssgridlegacy.no-cssgrid .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.resize-by-browser-width .dt-css-grid .wf-cell,\n  .no-cssgridlegacy.no-cssgrid .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.resize-by-browser-width .dt-css-grid .wf-cell {\n    width: 50%;\n  }\n  .cssgridlegacy.no-cssgrid .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.resize-by-browser-width .dt-css-grid .wf-cell.double-width,\n  .no-cssgridlegacy.no-cssgrid .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.resize-by-browser-width .dt-css-grid .wf-cell.double-width {\n    width: calc(50%)*2;\n  }\n}\n@media screen and (max-width: 991px) {\n  .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.resize-by-browser-width .dt-css-grid {\n    grid-template-columns: repeat(1,1fr);\n  }\n  .cssgridlegacy.no-cssgrid .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.resize-by-browser-width .dt-css-grid .wf-cell,\n  .no-cssgridlegacy.no-cssgrid .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.resize-by-browser-width .dt-css-grid .wf-cell {\n    width: 100%;\n  }\n  .cssgridlegacy.no-cssgrid .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.resize-by-browser-width .dt-css-grid .wf-cell.double-width,\n  .no-cssgridlegacy.no-cssgrid .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.resize-by-browser-width .dt-css-grid .wf-cell.double-width {\n    width: calc(100%)*2;\n  }\n}\n@media screen and (max-width: 767px) {\n  .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.resize-by-browser-width .dt-css-grid {\n    grid-template-columns: repeat(1,1fr);\n  }\n  .cssgridlegacy.no-cssgrid .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.resize-by-browser-width .dt-css-grid .wf-cell,\n  .no-cssgridlegacy.no-cssgrid .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.resize-by-browser-width .dt-css-grid .wf-cell {\n    width: 100%;\n  }\n  .cssgridlegacy.no-cssgrid .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.resize-by-browser-width .dt-css-grid .wf-cell.double-width,\n  .no-cssgridlegacy.no-cssgrid .portfolio-shortcode.portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2.resize-by-browser-width .dt-css-grid .wf-cell.double-width {\n    width: calc(100%)*2;\n  }\n}\n<\/style><div class=\"portfolio-shortcode portfolio-masonry-shortcode-id-9885f7c2b42160f743d7dea0a4220fb2 mode-grid bottom-overlap-layout-list content-bg-on jquery-filter dt-icon-bg-on dt-icon-hover-bg-on scale-img dt-css-grid-wrap resize-by-browser-width loading-effect-move-up description-under-image \" data-padding=\"25px\" data-cur-page=\"1\" data-post-limit=\"6\" data-pagination-mode=\"pages\" data-desktop-columns-num=\"2\" data-v-tablet-columns-num=\"1\" data-h-tablet-columns-num=\"2\" data-phone-columns-num=\"1\" data-width=\"0px\" data-columns=\"0\"><div class=\"dt-css-grid\" ><div class=\"visible wf-cell\" data-post-id=\"13273\" data-date=\"2016-08-16T20:41:55+08:00\" data-name=\"Paper Coffee Cup\"><article class=\"post visible no-img post-13273 dt_portfolio type-dt_portfolio status-publish hentry dt_portfolio_category-product-design dt_portfolio_category-197\" data-name=\"Paper Coffee Cup\" data-date=\"2016-08-16T20:41:55+08:00\">\n\n<div class=\"post-entry-content\">\n\n\t<h3 class=\"entry-title\">\n\t\t<a href=\"https:\/\/www.yibo.net\/?dt_portfolio=paper-coffee-cup\" target=\"\" title=\"Paper Coffee Cup\" rel=\"bookmark\">Paper Coffee Cup<\/a>\n\t<\/h3>\n\n\t<div class=\"entry-meta portfolio-categories\"><span class=\"category-link\"><a href=\"https:\/\/www.yibo.net\/?dt_portfolio_category=product-design\" >Product Design<\/a><\/span><a href=\"javascript:void(0);\" title=\"\u4e0b\u53488:41\" class=\"data-link\" rel=\"bookmark\"><time class=\"entry-date updated\" datetime=\"2016-08-16T20:41:55+08:00\">2016\u5e748\u670816\u65e5<\/time><\/a><\/div>\n\t<div class=\"entry-excerpt\"><p>Maecenas enim velit, euismod eu tempor sit amet, dictum ateu tempor sit amet.<\/p>\n<\/div>\n\t<a class=\" post-details details-type-link \" href=\" https:\/\/www.yibo.net\/?dt_portfolio=paper-coffee-cup \" target=\"\">Read more<i class=\"fa fa-caret-right\" aria-hidden=\"true\"><\/i><\/a>\n<\/div><\/article><\/div><\/div><!-- iso-container|iso-grid --><div class=\"paginator\" role=\"navigation\"><\/div><\/div>[\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column][\/vc_column][\/vc_row]<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":40,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/www.yibo.net\/index.php?rest_route=\/wp\/v2\/pages\/15808"}],"collection":[{"href":"https:\/\/www.yibo.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.yibo.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.yibo.net\/index.php?rest_route=\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yibo.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=15808"}],"version-history":[{"count":5,"href":"https:\/\/www.yibo.net\/index.php?rest_route=\/wp\/v2\/pages\/15808\/revisions"}],"predecessor-version":[{"id":49381,"href":"https:\/\/www.yibo.net\/index.php?rest_route=\/wp\/v2\/pages\/15808\/revisions\/49381"}],"wp:attachment":[{"href":"https:\/\/www.yibo.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15808"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}