Transforming Image Grid - HTML CSS & JavaScript

Published: 16 June 2021
on channel: Qixotl LFC
946
23

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: https://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


Watch video Transforming Image Grid - HTML CSS & JavaScript online without registration, duration hours minute second in high quality. This video was added by user Qixotl LFC 16 June 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 946 once and liked it 23 people.