How To Create Expanding Image Gallery Using HTML And CSS | Expandable Card on Hover

[@panchalproduction7287]

Thank you sir ❤️❤️big fan 🙏

[@dragx26]

Biggest fan 😍

[@ranaanas4375]

Thank you sir , i create my first website through this video. It is very helpful thank you so much❤❤❤😊😊

[@hiwotina26]

Watching your videos is satisfying! Keep it up!

[@balazscsanyi3665]

I will use this beautiful image gallery. Thanks.

[@sahabStores]

Thanks so much Sir. Great Your fan from Nigeria

[@GreatStackDev]

You are very welcome

[@ebru3135]

thanks for video really u are so talented tpls keep it up

[@GreatStackDev]

Thanks, Glad you like this tutorial to make expandable image gallery

[@abrahamjbah]

Your are such a great teacher🙏.

[@charith-q8m]

Use js loop to add different background images to each card. I think it's easier

[@Gamer_Guy2.0]

i love your videos, is great. I understood everything you did, greatwork.

[@zeljkoferber9684]

thank you , u do grate job :) i am first time on your chanal and i am delighted with amount of materials and project u did. thank u friend :)

[@aurianengr]

thanks to you i'm able to do this

[@ayushayush4608]

Soon you hit 1billion subscribers 🎉😅❤

[@Nanashi-rq7lk]

Nice Tutorial

[@PuppiesVideosCompilation]

What do i do if i want the images to be displayed below one another? Like 5 at the Top and 5 below them

[@_g4m3r_]

flex-direction: column; // display items vertically one by one flex-wrap: wrap; // allows items to wrap in multiple lines if you want 10 items in 2 rows (5 each) then use wrap and play with the container's width until you find the right size.

[@CoolPredator09]

@@_g4m3r_ where should i put the code? In in the .container or inside the nth-child?

[@_g4m3r_]

​@@CoolPredator09 Sorry I can't recall the code from 6 months ago, and I don't have the time now to rewatch the video. If I should guess, I'd say the container.

[@zakariatehami9749]

thank you😇

[@siddheshbhise2056]

Rock Always🤘... Huge fan of you😀

[@GreatStackDev]

Thanks Siddhesh, Glad you liked this expandable image gallery design

[@ayushayush4608]

Thanks brother ❤

[@arissonlimafreire]

Very good and very easy

[@GreatStackDev]

Glad you think so!

[@Programmerkabir]

Thank you sir

[@TheAlexdn]

Good excellent!😄💎

[@GreatStackDev]

Thank you! 😃

[@AliRaza-q6f6q]

I like It

[@adamphilips76]

This fella's back must hurt... carry the entire website production Industry by himself

[@tobilobaayobamiadelaja2322]

How will it run on a mobile screen. Will the images hover like this or it will just be natural on the mobile screen

[@diegoarredondo4675]

Dude thank you so much for this! I have a question, how can I make every one of the pictures be a link to other pages? I'm trying to do it in HTML with an tag but it changes every piture to the same one. Sorry for my bad english, I hope you can understand me. Also I'm new in programming, thanks again!

[@Nursaidbek2007]

thank you

[@GreatStackDev]

You're welcome

[@ayushsarvaiya5363]

Hello sir..🙋 I am big fan of you 🤘 👉 And i have request to you that please make a live stock market price website with graphs 👈 Thank you sir 🙂

[@SongsetImage]

Very useful videos new person this filled

[@GreatStackDev]

Thank you very much, Must watch this beginners tutorial too: kzbin.info/www/bejne/fXK9h6mmn92Mh7s

[@funnyedits012]

Sir please tell me what is the difference between node.js and java What i will choose and why ?

[@3pcgi959]

Node.js and Java are both popular technologies used for building server-side applications, but they have distinct differences in terms of language, architecture, and use cases. Here are some key differences between Node.js and Java: Programming Language: Node.js: It is primarily associated with JavaScript, and more specifically, server-side JavaScript. Node.js uses the V8 JavaScript engine, which is developed by Google and is known for its high performance. Java: Java is a general-purpose programming language that can be used for a wide range of applications, including server-side development. It is statically typed and has a more extensive ecosystem compared to JavaScript. Execution Model: Node.js: It is built on an event-driven, non-blocking I/O model. This allows for handling a large number of concurrent connections efficiently. Java: Java applications traditionally use a multithreaded approach, where each client request typically corresponds to a separate thread. This can be both an advantage and a challenge, as managing threads requires careful attention to avoid issues like deadlocks and race conditions. Concurrency: Node.js: It excels at handling a large number of concurrent connections due to its event-driven, asynchronous nature. Java: While Java supports concurrency through multithreading, managing a large number of threads can become complex. Java has introduced features like the ForkJoinPool and the CompletableFuture class to facilitate more modern and scalable concurrency. Ecosystem and Libraries: Node.js: It has a rich ecosystem of npm (Node Package Manager) modules, which allows developers to easily integrate third-party libraries into their applications. Java: Java has a mature ecosystem with a vast array of libraries and frameworks, such as Spring, Hibernate, and Apache libraries, providing solutions for various aspects of application development. Performance: Node.js: Known for its high-performance, especially in I/O-bound and event-driven applications. Java: Java applications are typically compiled to bytecode and run on the Java Virtual Machine (JVM), providing good performance, especially in compute-bound tasks. Use Cases: Node.js: Well-suited for real-time applications, microservices, and applications with a high degree of concurrent connections, such as chat applications and streaming services. Java: Widely used in enterprise applications, large-scale systems, and situations where a more traditional and multithreaded approach is preferable. In summary, the choice between Node.js and Java depends on factors such as the specific requirements of your project, your team's expertise, and the nature of the application you are building. Both technologies have their strengths and are widely used in the development community.

[@СагындыкТушжанов-ъ8е]

👍👍👍👍👍

[@GreatStackDev]

thanks

[@SasiKumar-be1yq]

What about responsive...make a video for responsive all devices

[@baptistikenna9770]

Thanks for the video bro Please can you make a video on nth child css characteristics

[@GreatStackDev]

In many of my videos I have used that

[@Nicola_Tesla452]

Welcome Is it possible to make a long detailed video to design a complete website or a frontend project in HTML, CSS and Javascript please 😍🤗😘

[@kouandtin8059]

You want him to create a website for you straight away no?

[@Nicola_Tesla452]

@@kouandtin8059 No, I tell him that I need to learn how to design a complete website, and it's okay for that to be soon Why are you so upset?

[@pushprajjj]

@@Nicola_Tesla452 bro ! he already did. check his playlist

[@Nicola_Tesla452]

@@pushprajjj give me a link please

[@gflaap]

@@Nicola_Tesla452 if you are Not Even able to find this Video in his playlist on your own, just dont start with coding!

[@ViajesPremium-nh9gw]

Is this responsive?

[@dollymanglani4122]

Hi, How can I use this image gallery in the slider (slick or any)

[@KinshukWalks]

For me the nth child is not working to add any image, i am only abe to add image by creating a diff div.

[@duemrlcommunication]

chiedo, e possibile aggiungere un collegamento all'immagine di sfondo?

[@SharunPriyan]

how to make images to be placed in vertically one by one.

[@ninolaurente2859]

How to put background of that? Because it is boring that there no background image boring if all white

[@thakurruchi4180]

how to increase width of the second pic to cover the first width on hover????

[@sagarvarshney9805]

Any one can help me why my hover effect not work I style all the things according to this tutorial thanks in advance

[@uidairasra]

bhai app jo website banate hai os sirf app ke computer me run hoga na mai chahta hu ki oh website net par show ho to uske liye domain purchase karna padegana free domain aur free hosing ke bare me video banaye

[@GreatStackDev]

ye free web hosting site hai yha apna website upload kar sakte ho: in.000webhost.com/

[@shanmugapriyanpremkumar3927]

These images are horizontally aligned. How to make these images aligned vertically one by one below?

[@Sibu-kw1oq]

I think flex-direction:column; may help

[@goatlm10m]

I Can Make it Bro

[@Айбек-г3е]

Ooooo

[@Mpwr16]

Good but not responsive

[@goatlm10m]

Hey, How can i get a famous KZbinr Bro can you 🥲🥲🥲🥲

[@abdurRahman-po6jr]

Thank you soo much Sir ❤