Ucalgary_Baja/BajaUofCWebsite
4
0
Fork 0
mirror of https://github.com/UofCBaja/BajaUofCWebsite.git synced 2025-06-16 05:44:17 -06:00
Code Issues Packages Projects Releases Wiki Activity

Gallery css

Browse Source
This commit is contained in:
Sarim-Sheikh-2003 2024-01-20 12:20:00 -07:00
parent 1bf68aeb18
commit 225c241ac0
2 changed files with 53 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/Gallery/Gallery.css
View File

@ -1,42 +1,52 @@
.gallery { .gallery {
display: grid; display: flex;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); flex-wrap: wrap;
grid-gap: 10px; justify-content: center;
} }
@media screen and (max-width: 767px) { .galleryItem {
.gallery { min-width: 10vw;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); min-height: 10vh;
grid-gap: 5px; max-width: 60vw;
} max-height: 60vh;
}
.galleryItem {
width: 100%;
height: 100%;
object-fit: cover; object-fit: cover;
transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out;
} }
.galleryItem:hover { .galleryItem:hover {
transform: scale(1.05); transform: scale(1.05);
} }
.container { .container {
position: relative; position: relative;
width: 40%; width: fit-content;
} height: fit-content;
}
.modalImage { .modalImage {
width: 100%; min-width: 20vw;
} min-height: 20vh;
max-width: 70vw;
max-height: 70vh;
}
.modalButton { .modalButton {
position: absolute; position: absolute;
padding: 16px; top: 10%;
background-color: green; left: 90%;
border-radius: 16px; transform: translate(-50%, -50%);
bottom: 10px; -ms-transform: translate(-50%, -50%);
left: 200px; opacity: 0.5;
width: 100px; background-color: #555;
} color: white;
font-size: 15px;
padding: 15px 20px;
border: none;
cursor: pointer;
border-radius: 50%;
}
.modalButton:hover {
background-color: whitesmoke;
color: black;
}

10
src/Gallery/Gallery.js
View File

@ -7,7 +7,8 @@ const images = [
{ src: 'https://wallpapers.com/images/featured-full/cool-anime-6kbwj9794wpnsfr1.jpg', alt: 'Image 2' }, { src: 'https://wallpapers.com/images/featured-full/cool-anime-6kbwj9794wpnsfr1.jpg', alt: 'Image 2' },
{ src: 'https://wallpapers.com/images/featured/cool-anime-pfp-pictures-71urutpksg13vkbk.jpg', alt: 'Image 3' }, { src: 'https://wallpapers.com/images/featured/cool-anime-pfp-pictures-71urutpksg13vkbk.jpg', alt: 'Image 3' },
{ src: 'https://i.pinimg.com/236x/ab/dc/52/abdc52db893674a7b5dcb767be8776e5.jpg', alt: 'Image 4' }, { src: 'https://i.pinimg.com/236x/ab/dc/52/abdc52db893674a7b5dcb767be8776e5.jpg', alt: 'Image 4' },
{ src: 'https://qph.cf2.quoracdn.net/main-qimg-a3fdbac7bf9f8db58f147887ffa76d88-lq', alt: 'Image 5' } { src: 'https://qph.cf2.quoracdn.net/main-qimg-a3fdbac7bf9f8db58f147887ffa76d88-lq', alt: 'Image 5' },
{ src: 'https://i.redd.it/people-already-making-good-use-of-that-public-domain-v0-krh76hi874ac1.png?width=2000&format=png&auto=webp&s=405581952294275a5d6cf05a97c05b3387b73f34', alt: 'Image 6'}
]; ];
export default function Gallery() { export default function Gallery() {
@ -42,10 +43,13 @@ export default function Gallery() {
overlay: { overlay: {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center',
}, },
content: { content: {
position: 'initial' position: 'initial',
border: 'none',
borderRadius: '0px',
padding: '0px'
} }
}} }}
> >