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

82
src/Gallery/Gallery.css
View File

@ -1,42 +1,52 @@
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
grid-gap: 10px;
}
display: flex;
flex-wrap: wrap;
justify-content: center;
}
@media screen and (max-width: 767px) {
.gallery {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-gap: 5px;
}
}
.galleryItem {
min-width: 10vw;
min-height: 10vh;
max-width: 60vw;
max-height: 60vh;
object-fit: cover;
transition: transform 0.2s ease-in-out;
}
.galleryItem {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.2s ease-in-out;
}
.galleryItem:hover {
transform: scale(1.05);
}
.galleryItem:hover {
transform: scale(1.05);
}
.container {
position: relative;
width: 40%;
}
.container {
position: relative;
width: fit-content;
height: fit-content;
}
.modalImage {
width: 100%;
}
.modalImage {
min-width: 20vw;
min-height: 20vh;
max-width: 70vw;
max-height: 70vh;
}
.modalButton {
position: absolute;
padding: 16px;
background-color: green;
border-radius: 16px;
bottom: 10px;
left: 200px;
width: 100px;
}
.modalButton {
position: absolute;
top: 10%;
left: 90%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
opacity: 0.5;
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/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://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() {
@ -42,10 +43,13 @@ export default function Gallery() {
overlay: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
justifyContent: 'center',
},
content: {
position: 'initial'
position: 'initial',
border: 'none',
borderRadius: '0px',
padding: '0px'
}
}}
>