.projects .winframe-body { aspect-ratio: 5 / 1; overflow: hidden; } @media screen and (orientation:portrait) { .projects .winframe-body { aspect-ratio: 2 / 1; } } .projects .winframe-body::before { content: ""; position: absolute; inset: 0; z-index: -1; /* Fixes edges not being blurred */ top: -10px; left: -10px; right: -10px; bottom: -10px; background-image: inherit; background-size: cover; background-position: center; transition: 0.25s ease; } .projects .winframe-body:hover::before { filter: blur(4px); -webkit-filter: blur(4px); } .projects .winframe-text { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; text-shadow: 1px 1px 2px #000000; transition: 0.25s ease; opacity: 0.5; } .projects .winframe-body:hover .winframe-text { opacity: 1; }