├── 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 | } --------------------------------------------------------------------------------