├── README.md
├── index.html
├── main.js
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # image-gallery-CSS
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Image Gallery | by @Risnugr
7 |
8 |
9 |
10 |
11 |

12 |

13 |

14 |

15 |

16 |
17 |
18 |
--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | console.log("Hello")
2 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | height: 100%;
3 | }
4 |
5 | body {
6 | margin: 0;
7 | background: #000000;
8 | display: grid;
9 | place-items: center;
10 | }
11 |
12 |
13 | .gallery {
14 | display: flex;
15 | width: 440px;
16 | height: 200px;
17 | }
18 |
19 | .gallery img {
20 | min-width: 0;
21 | flex: 1 1 10px;
22 | object-fit: cover;
23 | opacity: 0.5;
24 | transition: 0.5s;
25 | }
26 |
27 | .gallery img:hover {
28 | flex: 1 1 280px;
29 | opacity: 1;
30 | }
--------------------------------------------------------------------------------