Transforming Image Grid - HTML CSS & JavaScript 

In this video you will be creating a cool, responsive and dynamic image gallery created in plain JavaScript, HTML and CSS; so, no jQuery, GSAP, React or anything of that nature.
Images are displayed in a proportionate grid pattern which is sized dynamically, depending on the current viewport dimensions. Users can then choose which type of images they want to see, or they can choose to see all of them by pressing on one of the buttons in the header of the image display which, like its adjoining image display, animates seamlessly from one state to the next.
The functionality and smooth animations of this image display will never be compromised by an obtuse sequence of inputs or an irregular viewport size. No matter what state the gallery is currently in, it will still find a way to transition from one state to the other without missing a beat.
If you want to display your images in a grid, but don’t want to be lost in the torrent of banal image grids, precipitated by increasing support for CSS grids, then this is the image gallery for you.
📚 Materials/References:
- Completed project on Code Pen: codepen.io/LFCProductions/pen...
🧠 Concepts Covered:
- CSS transitions and the advantages that they have over CSS animations.
- Use absolute positioning to create a grid layout
- Deal with media queries in JavaScript
- Positioning elements in JavaScript
💻 Technologies used:
- HTML
- CSS
- JavaScript
Song: Jarico - Landscape (Vlog No Copyright Music) Music promoted by Vlog No Copyright Music. Video Link: • Video
If you enjoyed this video then please consider liking 👍 and subscribing. You would be doing me a huge favour if you did this and it would be greatly appreciated ❤️ by me. Likewise, if you have any queries or comments that you want answered. Then please, don’t hesitate post them down into the comments box below. I would love to hear back from you and will answer all of your questions to the best of my ability.
Stay awesome guys. ❤️
#webdev#computerscience#cs#html#css#javascript#animations#responsivedesign#website#images

Наука