.grid-item { background-color: #eaeaea; border-radius: 3px; width: 240px; margin-bottom: 10px; padding: 5px; box-sizing: border-box; height: 200px; transition: 0.18s ease-in-out; overflow: hidden; position: relative; } .service-wrapper-inner { height: 100%; width: 90%; position: absolute; z-index: 1; top: 71%; padding: 10px 15px; transition: 0.2s ease; } .service-wrapper-inner p { color: #e7e7e7; } .service-wrapper-inner.notitle { width: 60%; top: 76%; } .service-overlay { background-color: rgba(32, 32, 32, 0.4); width: 120%; height: 120%; position: absolute; top: 68%; left: -28px; z-index: 0; transition: 0.2s ease; } .service-overlay.notitle { clip-path: polygon(0 0, 100% calc(100% - 2vw), 100% 100%, 0 100%); height: 200%; } .service-overlay.title { clip-path: polygon(0 0, 100% calc(100% - 18.5vw), 100% 100%, 0 100%); } .grid-item:hover .service-wrapper-inner { top: -10%; padding: 15px 15px; } .grid-item:hover .service-wrapper-inner.notitle { padding: 10px 15px; } .grid-item:hover .service-overlay { background-color: rgba(32, 32, 32, 0.8); } .grid-item:hover .service-overlay.title { top: -10%; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } .grid-item:hover .service-overlay.notitle { top: -20%; clip-path: polygon(0 0, calc(100% - 15vw) 0, 100% 100%, 0 100%); left: -20%; } .grid { margin: 0 auto; transition: 0.2s all; } .grid-item--tall3 { height: 300px; } .grid-item--tall4 { height: 400px; } .grid-item--width2 { background-color: #81d4fa; width: 490px; } .grid-item--image { width: fit-content; height: fit-content; } @media (max-width: 575px) { .grid-item--width2 { width: 100%; } } .blur-me { filter: grayscale(0%) blur(0.5px) brightness(100%); opacity: 1; box-shadow: none; } .unblur-me { filter: grayscale(0%) blur(0px) brightness(100%); opacity: 1; box-shadow: none; } .grid:hover .grid-item:hover { opacity: 1; } /*# sourceMappingURL=masonry.css.map */