* { padding: 0; margin: 0; } .portfolio-grid-container { max-width: 90vw; width: 95%; margin: auto; padding: 30px; } .photo-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .column { display: flex; flex-direction: column; gap: 20px; } .photo { position: relative; cursor: pointer; } .photo img { width: 100%; height: 100%; border-radius: 1px; filter: brightness(100%); border: none; animation: fadeIn 1s; transition: filter 0.5s ease, border 1s ease, width 0.5s ease, height 0.5s ease, animation 0.8s ease-in-out; } .photo img.enlarged { max-width: 90vw; max-height: 700px; margin-top: 60px !important; margin-bottom: 90px; width: auto; height: auto; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 995; filter: brightness(100%) !important; background-color: rgba(255, 255, 255, 0.482); border: 30px solid rgba(255, 255, 255, 0.363); animation: fadeIn 1s; } .photo.enlarged:hover .portfolio-text { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } .photo:hover .portfolio-text { opacity: 1; cursor: pointer; } .photo:hover img { filter: brightness(80%); } .portfolio-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 10px; text-align: center; opacity: 0; transition: opacity 1s ease; z-index: 994 !important; } .portfolio-text h2 { font-family: 'Julius Sans One'; color: white; font-size: 30px; font-weight: 700; } .portfolio-text h3 { font-family: 'Nunito'; color: white; font-weight: light; font-size: 15px; } @media (max-width: 1380px) { .photo-gallery { display: grid; grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 965px) { .photo-gallery { display: grid; grid-template-columns: repeat(1, 1fr) !important; } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter