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

  Рет қаралды 42,061

GreatStack

GreatStack

Жыл бұрын

Learn How To Make An Expanding Image Gallery Using HTML And CSS | Expandable Card on Hover using Using HTML and CSS
#htmlandcss #websitedesign
❤️ SUBSCRIBE: goo.gl/tTFmPb
This this video you learn to create an expandable image gallery. In this image gallery all images will be displayed in small width and when we will take cursor over the image then It will display the image in full size. We will create this image with transition using CSS.
Download Image: drive.google.com/file/d/1nsYQ...
-----------------------------------------
Suggested Course:
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 easytutorialspro.com/go/course/
-------------------------------------
Recommended Videos:
Learn Complete HTML and CSS from basics:
► • HTML And CSS Tutorial ...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make a Business website step by step:
► • How To Make Website Us...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make fitness website design using HTML CSS:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make a Job Portal website design with HTML & CSS:
► • How To Make Website Us...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
Affordable web hosting (coupon- EASYTUTORIALS)
👉 easytutorialspro.com/hosting/
My recommended tools and tutorials
👉 easytutorialspro.com/
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------------------------
Images Credit:
unsplash.com/
-------------------------------------
Like - Follow & Subscribe us:
◼️ KZfaq: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr

Пікірлер: 68
@hiwotina26
@hiwotina26 Жыл бұрын
Watching your videos is satisfying! Keep it up!
@balazscsanyi3665
@balazscsanyi3665 Жыл бұрын
I will use this beautiful image gallery. Thanks.
@zeljkoferber9684
@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 :)
@abrahamjbah
@abrahamjbah Жыл бұрын
Your are such a great teacher🙏.
@ranaanas4375
@ranaanas4375 8 ай бұрын
Thank you sir , i create my first website through this video. It is very helpful thank you so much❤❤❤😊😊
@Gamer_Guy2.0
@Gamer_Guy2.0 9 ай бұрын
i love your videos, is great. I understood everything you did, greatwork.
@abdurRahman-po6jr
@abdurRahman-po6jr Жыл бұрын
Thank you soo much Sir ❤
@aurianengr
@aurianengr Жыл бұрын
thanks to you i'm able to do this
@panchalproduction7287
@panchalproduction7287 Жыл бұрын
Thank you sir ❤️❤️big fan 🙏
@dragx26
@dragx26 Жыл бұрын
Biggest fan 😍
@Nanashi-rq7lk
@Nanashi-rq7lk 10 ай бұрын
Nice Tutorial
@sahabStores
@sahabStores Жыл бұрын
Thanks so much Sir. Great Your fan from Nigeria
@GreatStackDev
@GreatStackDev Жыл бұрын
You are very welcome
@ebru3135
@ebru3135 Жыл бұрын
thanks for video really u are so talented tpls keep it up
@GreatStackDev
@GreatStackDev Жыл бұрын
Thanks, Glad you like this tutorial to make expandable image gallery
@siddheshbhise2056
@siddheshbhise2056 Жыл бұрын
Rock Always🤘... Huge fan of you😀
@GreatStackDev
@GreatStackDev Жыл бұрын
Thanks Siddhesh, Glad you liked this expandable image gallery design
@ayushayush4608
@ayushayush4608 Жыл бұрын
Thanks brother ❤
@AliRaza-q6f6q
@AliRaza-q6f6q 16 күн бұрын
I like It
@Programmerkabir
@Programmerkabir Жыл бұрын
Thank you sir
@TheAlexdn
@TheAlexdn Жыл бұрын
Good excellent!😄💎
@GreatStackDev
@GreatStackDev Жыл бұрын
Thank you! 😃
@zakariatehami9749
@zakariatehami9749 Жыл бұрын
thank you😇
@ayushayush4608
@ayushayush4608 Жыл бұрын
Soon you hit 1billion subscribers 🎉😅❤
@arissonlimafreire
@arissonlimafreire Жыл бұрын
Very good and very easy
@GreatStackDev
@GreatStackDev Жыл бұрын
Glad you think so!
@ayushsarvaiya5363
@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 🙂
@PuppiesVideosCompilation
@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_
@_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.
@syahminsemsubhari8664
@syahminsemsubhari8664 Жыл бұрын
@@_g4m3r_ where should i put the code? In in the .container or inside the nth-child?
@_g4m3r_
@_g4m3r_ Жыл бұрын
​@@syahminsemsubhari8664 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.
@tobilobaayobamiadelaja2322
@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
@user-sb1gn6br1w
@user-sb1gn6br1w Жыл бұрын
👍👍👍👍👍
@GreatStackDev
@GreatStackDev Жыл бұрын
thanks
@Nursaidbek2007
@Nursaidbek2007 Жыл бұрын
thank you
@GreatStackDev
@GreatStackDev Жыл бұрын
You're welcome
@thakurruchi4180
@thakurruchi4180 Жыл бұрын
how to increase width of the second pic to cover the first width on hover????
@SongsetImage
@SongsetImage Жыл бұрын
Very useful videos new person this filled
@GreatStackDev
@GreatStackDev Жыл бұрын
Thank you very much, Must watch this beginners tutorial too: kzfaq.info/get/bejne/faeKidmhz969gY0.html
@funnyedits012
@funnyedits012 Жыл бұрын
Sir please tell me what is the difference between node.js and java What i will choose and why ?
@3pcgi959
@3pcgi959 6 ай бұрын
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.
@diegoarredondo4675
@diegoarredondo4675 8 ай бұрын
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!
@adamphilips76
@adamphilips76 Жыл бұрын
This fella's back must hurt... carry the entire website production Industry by himself
@dollymanglani4122
@dollymanglani4122 Жыл бұрын
Hi, How can I use this image gallery in the slider (slick or any)
@baptistikenna9770
@baptistikenna9770 Жыл бұрын
Thanks for the video bro Please can you make a video on nth child css characteristics
@GreatStackDev
@GreatStackDev Жыл бұрын
In many of my videos I have used that
@roshinif
@roshinif 3 ай бұрын
Use js loop to add different background images to each card. I think it's easier
@SasiKumar-be1yq
@SasiKumar-be1yq 11 ай бұрын
What about responsive...make a video for responsive all devices
@kaf4054
@kaf4054 Жыл бұрын
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
@duemrlcommunication 9 ай бұрын
chiedo, e possibile aggiungere un collegamento all'immagine di sfondo?
@mohammedminhaz8
@mohammedminhaz8 Жыл бұрын
I Can Make it Bro
@Nicola_Tesla452
@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
@kouandtin8059 Жыл бұрын
You want him to create a website for you straight away no?
@Nicola_Tesla452
@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
@pushprajjj Жыл бұрын
@@Nicola_Tesla452 bro ! he already did. check his playlist
@Nicola_Tesla452
@Nicola_Tesla452 Жыл бұрын
@@pushprajjj give me a link please
@gflaap
@gflaap Жыл бұрын
@@Nicola_Tesla452 if you are Not Even able to find this Video in his playlist on your own, just dont start with coding!
@user-kz6ke6cm6k
@user-kz6ke6cm6k Жыл бұрын
how to make images to be placed in vertically one by one.
@ninolaurente2859
@ninolaurente2859 Жыл бұрын
How to put background of that? Because it is boring that there no background image boring if all white
@sagarvarshney9805
@sagarvarshney9805 Жыл бұрын
Any one can help me why my hover effect not work I style all the things according to this tutorial thanks in advance
@ViajesPremium-nh9gw
@ViajesPremium-nh9gw Жыл бұрын
Is this responsive?
@uidairasra
@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
@GreatStackDev Жыл бұрын
ye free web hosting site hai yha apna website upload kar sakte ho: in.000webhost.com/
@shanmugapriyanpremkumar3927
@shanmugapriyanpremkumar3927 Жыл бұрын
These images are horizontally aligned. How to make these images aligned vertically one by one below?
@Sibu-kw1oq
@Sibu-kw1oq 8 ай бұрын
I think flex-direction:column; may help
@Mpwr16
@Mpwr16 Жыл бұрын
Good but not responsive
@user-tn1yc1ij8d
@user-tn1yc1ij8d Жыл бұрын
Ooooo
@mohammedminhaz8
@mohammedminhaz8 Жыл бұрын
Hey, How can i get a famous KZfaqr Bro can you 🥲🥲🥲🥲
Викторина от МАМЫ 🆘 | WICSUR #shorts
00:58
Бискас
Рет қаралды 5 МЛН
ОБЯЗАТЕЛЬНО СОВЕРШАЙТЕ ДОБРО!❤❤❤
00:45
Smart Sigma Kid #funny #sigma #comedy
00:40
CRAZY GREAPA
Рет қаралды 34 МЛН
Animated Card Hover Effect | Html & CSS | CodeEra
6:29
Haveri ka Krishna
Рет қаралды 233 М.
How to create a CSS image gallery in 5 minutes! 📷
5:38
Bro Code
Рет қаралды 46 М.
These CSS PRO Tips & Tricks Will Blow Your Mind!
8:48
Coding2GO
Рет қаралды 188 М.
Create Responsive Image Gallery Using HTML and CSS
20:28
Tech2 etc
Рет қаралды 145 М.
Image Rotator using Html and CSS 3 - Website Design
7:28
Online Web Ustaad
Рет қаралды 81 М.
HTML and CSS Project Tutorial: Pure CSS Image Slider
7:41
Skillthrive
Рет қаралды 286 М.
How To Create Image Search Engine Using HTML CSS and JavaScript
34:37
Subtle, yet Beautiful Scroll Animations
5:04
Beyond Fireship
Рет қаралды 1,7 МЛН
How To Make Drop Down Menu Using HTML And CSS | HTML Website Tutorials
21:24
Викторина от МАМЫ 🆘 | WICSUR #shorts
00:58
Бискас
Рет қаралды 5 МЛН