­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ .upk-ramble-grid { position: relative; } .upk-ramble-grid .upk-post-wrap { display: grid; } .upk-ramble-grid .upk-item { display: flex; position: relative; position: relative; overflow: hidden; border-radius: 6px; height: 360px; -webkit-box-shadow: 0px 3px 10px -5px rgba(151, 163, 184, 0.5); box-shadow: 0px 3px 10px -5px rgba(151, 163, 184, 0.5); -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .upk-ramble-grid .upk-item:hover .upk-image-wrap:before { background-color: rgba(239, 35, 60, 0.5); } .upk-ramble-grid .upk-item:hover .upk-meta { position: relative; opacity: 1; margin-top: 0; margin-bottom: 15px; transform: translateY(0); transition-delay: 0.3s; } .upk-ramble-grid .upk-item:hover .upk-date-cetagory-wrap { position: absolute; opacity: 0; visibility: hidden; transform: translateY(20px); transition-delay: 0.3s; } .upk-ramble-grid .upk-item:hover .upk-title a { color: #fff; } .upk-ramble-grid .upk-item:hover .upk-text { color: #f8f8f8; opacity: 1; transition-delay: 0.4s; transform: translateY(0px); } .upk-ramble-grid .upk-item:hover .upk-btn-comments-wrap .upk-readmore { color: #fff; } .upk-ramble-grid .upk-item:hover .upk-btn-comments-wrap .upk-readmore svg * { fill: #fff; } .upk-ramble-grid .upk-item:hover .upk-btn-comments-wrap .upk-comments { color: #fff; } .upk-ramble-grid .upk-item:hover .upk-default-show { visibility: hidden; opacity: 0; transform: translateY(20px); } .upk-ramble-grid .upk-item:hover .upk-default-hide { opacity: 1; transform: translateY(0); visibility: visible; transition-delay: 0.1s; } .upk-ramble-grid .upk-image-wrap { display: flex; width: 100%; } .upk-ramble-grid .upk-image-wrap:before { position: absolute; content: ""; top: 0; right: 0; width: 100%; height: 100%; background-color: #fff; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .upk-ramble-grid .upk-img { object-fit: cover; height: 100%; width: 100%; } .upk-ramble-grid .upk-content { position: absolute; top: 0; right: 0; width: 100%; } .upk-ramble-grid .upk-author-name a { color: #fff; font-size: 15px; font-weight: 600; text-transform: capitalize; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } .upk-ramble-grid .upk-post-time, .upk-ramble-grid .upk-date { color: #f5f5f5; font-size: 14px; } .upk-ramble-grid .upk-post-time { margin-right: 5px; } .upk-ramble-grid .upk-post-time i { margin-left: 2px; } .upk-ramble-grid .upk-meta { display: flex; align-items: center; position: absolute; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; opacity: 0; transform: translateY(-100%); } .upk-ramble-grid .upk-meta .upk-author-image { margin-left: 15px; } .upk-ramble-grid .upk-meta .upk-author-image img { border-radius: 80px; } .upk-ramble-grid .upk-date-reading-time { color: #f5f5f5; font-size: 14px; flex-wrap: wrap; } .upk-ramble-grid .upk-date-reading-time > div { position: relative; display: inline-flex; } .upk-ramble-grid .upk-date-reading-time > div:before { content: attr(data-separator); margin: 0 8px; } .upk-ramble-grid .upk-date-reading-time > div:nth-child(1)::before { display: none; } .upk-ramble-grid .upk-date-cetagory-wrap { display: inline-flex; align-items: center; position: relative; opacity: 1; transition: all 0.3s ease; margin-bottom: 15px; transform: translateY(0); visibility: visible; transition: all 0.3s ease; } .upk-ramble-grid .upk-date-cetagory-wrap .upk-post-time, .upk-ramble-grid .upk-date-cetagory-wrap .upk-date { color: #8D99AE; font-size: 15px; line-height: 1; } .upk-ramble-grid .upk-date-cetagory-wrap .upk-category { position: relative; margin-right: 10px; padding-right: 10px; display: inline-flex; } .upk-ramble-grid .upk-date-cetagory-wrap .upk-category a { color: #8D99AE; font-size: 15px; text-transform: capitalize; line-height: 1; } .upk-ramble-grid .upk-date-cetagory-wrap .upk-category a + a { margin-right: 5px; } .upk-ramble-grid .upk-date-cetagory-wrap .upk-category:before { content: ""; position: absolute; background: #e6e9ec; height: 100%; width: 2px; right: -1px; } .upk-ramble-grid .upk-title { font-size: 24px; font-weight: 600; margin: 0; padding-bottom: 15px; text-transform: capitalize; } .upk-ramble-grid .upk-title a { color: #2B2D42; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .upk-ramble-grid .upk-text { font-size: 16px; color: #8D99AE; opacity: 0; transition: all 0.3s ease; transform: translateY(-20px); } .upk-ramble-grid .upk-btn-comments-wrap { display: flex; justify-content: space-between; align-items: center; position: absolute; width: 100%; bottom: 0; padding: 30px; } .upk-ramble-grid .upk-btn-comments-wrap .upk-readmore { color: #8D99AE; font-size: 15px; font-weight: 600; text-transform: capitalize; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } .upk-ramble-grid .upk-btn-comments-wrap .upk-readmore svg { width: 1em; } .upk-ramble-grid .upk-btn-comments-wrap .upk-readmore svg * { fill: #8D99AE; } .upk-ramble-grid .upk-btn-comments-wrap .upk-comments { color: #8D99AE; font-size: 15px; text-transform: capitalize; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; } .upk-ramble-grid .upk-default-show { position: absolute; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; opacity: 1; transform: translateY(0); padding: 30px; } .upk-ramble-grid .upk-default-hide { position: absolute; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; opacity: 0; transform: translateY(-100%); visibility: hidden; padding: 30px; } .upk-global-link-yes .upk-ramble-grid .upk-item:hover { cursor: pointer; }