/****************Advent Calendar 2017 - 1*****************/ /******Excerpt reveal on hover fullwidth blog layout******/ /**********************By Divi Soup***********************/ /*Position and size the posts*/ .ds-advent-1 .et_pb_post { /*position: relative;*/ width: 33%; float: left; margin-bottom: 0; cursor: default; } /*Resize posts for smaller screens*/ @media all and (max-width: 980px) { .ds-advent-1 .et_pb_post { width: 50%; } } @media all and (max-width: 479px) { .ds-advent-1 .et_pb_post { width: 100%; } } /*Remove image margin*/ .ds-advent-1 .entry-featured-image-url { margin-bottom: 0; } /*Add the gradient overlay*/ .ds-advent-1 .entry-featured-image-url:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(1%, rgba(0, 0, 0, 0.01)), to(rgba(0, 0, 0, 1))); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.01) 1%, rgba(0, 0, 0, 1) 100%); } /*Position the title*/ .ds-advent-1 .entry-title { position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; padding: 10px 20px 20px; -webkit-transition: all .5s ease; transition: all .5s ease; } /*Position the excerpt and read more*/ .ds-advent-1 .post-content { position: absolute; z-index: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; bottom: 0; padding: 20px; opacity: 0; -webkit-transition: all .5s ease; transition: all .5s ease; } /*For IE - Prevent text overflow*/ .ds-advent-1 .post-content p { display: block; } /*Style the read more*/ .ds-advent-1 a.more-link { display: block; clear: both; text-transform: uppercase; color: #000; background: #fff; width: 100px; text-align: center; margin-top: 10px; } /*Switch content on hover*/ .ds-advent-1 .et_pb_post:hover .entry-title { opacity: 0; z-index: 0; } .ds-advent-1 .et_pb_post:hover .post-content { opacity: 1; z-index: 1; display: block; } /*Limit the excerpt length on smaller screens*/ @media all and (max-width: 1400px) { .ds-advent-1 .post-content p { display: block; max-height: 9em; overflow: hidden; } } @media all and (max-width: 1280px) { .ds-advent-1 .post-content p { max-height: 6em; } } @media all and (max-width: 1080px) { .ds-advent-1 .post-content p { max-height: 4.5em; } } @media all and (max-width: 980px) { .ds-advent-1 .post-content p { max-height: 100%; overflow: visible; } } @media all and (max-width: 700px) { .ds-advent-1 .post-content p { max-height: 7.5em; overflow: hidden; } } @media all and (max-width: 479px) { .ds-advent-1 .post-content p { max-height: 100%; overflow: visible; } } /*If you are using pagination*/ .ds-advent-1 .pagination { padding: 20px; } /****************Advent Calendar 2017 - 1*****************/ /***End - Excerpt reveal on hover fullwidth blog layout***/ /**********************By Divi Soup***********************/ .page h2.entry-title, .page h2.entry-title a { font-family: 'Roboto','Roboto Slab','Georgia','Times New Roman','Times',serif; color: #aaa!important; }