photo gallery html and css | make a photo gallery using html & css only | am webtech

[@harim0suprem0]

THE ONLY PERSON ON KZbin WHO KNOWS HOW TO DO THIS, BLOODY HELL!!! Thank you brother 🙏

[@rubeshraman9223]

Thank You Brother, you literally saved my PROJECT.

[@manish-uh1ng]

Please share me code if u have

[@codewithmadrine7843]

You are a hero to me, thanks so much this took me 2days to finish cuz I didn't want to just copy and paste your code so on every CSS property that I didn't know , had to do some research. Once again thanks so much.❤❤❤❤

[@chukwumamaduabuchukwu9291]

please can you share the css code? thank you

[@benzhorge7086]

This is great but I think if the photos are stretched. object-fit: cover; to retain the photo ratio I think?

[@fitzysbaby2677]

thank you, i had a nice gallery with lightbox, then i decided i wanted folders and well it wasnt easy but i used your video to add the photos to my gallery, tyvm ( at first i thought this didnt work but i was just making errors and finally fixed it all :) )

[@siwarhabli6608]

Please do you have the code?

[@fitzysbaby2677]

@@siwarhabli6608 hey im a bit busy atm but later on i can load it onto my OneDrive and share the link so u can download it

[@ritjoshi5529]

@@fitzysbaby2677 can you give me codes?

[@daniel.kuru.audiovisual]

@@fitzysbaby2677 puedo descargar el código? estoy tratando de hacerlo hace 2 dias y me presenta errores

[@chukwumamaduabuchukwu9291]

please can you share the code with me?

[@sscode3809]

Good project ❤👍💯

[@sukucee21]

OMG I really love your tutorial, so easy, direct to the point tutorial!

[@fastxweb]

Glad it was helpful!

[@Monster_Ghidorah]

​@@fastxwebBro how can you check the gallery in chrome? I wrote all the program but i don't know how to see the gallery. What should i do to see it? Like is it the database in localhost or something? Please respond, I'm really in need of your help

[@angelosabalbarino]

​@@Monster_Ghidorahopen it with google chrome

[@atomruby4096]

very helpful, no need jquery or javascript. Just experiment first haha it works nevertheless after many attempts

[@fastxweb]

Great 👍

[@lydiamaglasang679]

how did you do the last part ehen you can move to other button

[@atomruby4096]

@@lydiamaglasang679 I didn't catch the question clearly, but well u can directly access the .pic (div box) without mentioning the parent div.. Example #check1:checked ~ .pic (just experiment XD it will work)

[@lydiamaglasang679]

@@atomruby4096 thank you very much

[@harshpawar993]

You are pro

[@kishanthapamagaraaniki6802]

REALLY VERY AWSOME

[@salamaalbadi3921]

the last part is a bit confusing , i get all my photos in the photo gallery and i can’t move around . . also the red line doesn’t move im pretty sure that i followed all the steps

[@ayushiojha6376]

Exactly I'm facing this same issue

[@kirubakaranadmk93]

The last part is not working the coding are same as you have but why is not working 😶 please tel mee

[@srinidhiacharya9685]

Thanks for the detailed Tutorial ❤it's awesome

[@rohamaabundo446]

your tut saved my assessment. thanks a bunch!

[@JoeSmith-xd9pn]

Surprised this only has a few thousand views

[@HuyVo-uz6wj]

Thanks for your contribution.

[@sudiptacoachingcentre4118]

Awesome

[@gameplayy7329]

that,s so amazing, i did step by step with your video and the results are so amazing, thanks a lot mate !!

[@sagarchandgude7102]

Can you please share source code...

[@NeekaRostran]

Yea share the code mothaphacka!!

[@shiva221B]

can you put your github page please for the projects

[@andreviniciusbezerradasilv9335]

thanks boss

[@amanshaban1227]

Make detail like this with example everything video may be so long no matter it is just my idea and up to you

[@kamilkowalczyk2951]

cool gallery, how can I make it responsive?

[@srinidhiacharya9685]

Why there is no smooth transition between all photos to ⏩ Family Photos. How can we do that!?

[@tigerarts8806]

I like this background music. Can I have it plz

[@-C0ns1an1ine-]

BEAUZ & JVNA - Crazy

[@bipanasunam858]

thank you so much❤

[@danceclub6135]

Thanks

[@Dianaa]

Good tutorial and easy to follow! thanks

[@ACZ115]

Your all videos very usefull.

[@fastxweb]

So nice of you

[@quensse954]

Thank you so much

[@alexcoutu212]

what does this line do ? i don't understand it... #check1:checked ~ .container .photo-gallery .pic{}

[@allainluy2735]

do you have a source code for this? please?

[@ogccr]

how can ı give a link for every image? ı did ıt didnt work becasue of that content ="photo gallery ".

[@blackgokurose9990]

There is a problem when reloading the page, because when I load it, it loads me in the last section and not in the section with all the photos.

[@someshwarghorpade5043]

Thank you Bhai

[@alsona_ps]

share us source code plze!!!

[@andyli2927]

Thank you!

[@fitcrickettube]

whats the size of img u use

[@emnnn21]

Thanks bruh

[@Deus-lo-Vuilt]

thanks , nice video

[@atanuray11]

You have saved my day dear :)

[@shahidvohra2239]

Thanks for a great tutorial! Super helpful and easy to follow. 🥰

[@Monster_Ghidorah]

How can you see the gallery in chrome? I wrote all the program but i don't know how to see the gallery. I'm new to this so please help me😢

[@NeekaRostran]

It doesn't work with me and i did everything as he wrote over there even Family class repite without need it because he has the family already. I chance the HTML as he did at first but ain't working anyway. Can you help me?

[@raito3411]

What did you use?

[@aishwaryac7041]

Where do u store all these images as backend

[@khushipandey2072]

Sir plz❤❤ reply muje ye pta krna h🙏🙏🌺🌺🌺🌺🌺🤌🌼🌼 ke apne seprate💫💫💫 folder m image kse kra mne sara code kra but last m🧏‍♀️🧏‍♀️🧏‍♀️🧏‍♀️ child fmly sb ek m hi hh🥺🥺

[@fastxweb]

[e-mail]

[@nicksonkalulu6502]

how to make it responsive for small device since it has a menu how can i do it please help me with the source for it to be responsive thanks

[@abdelhakimnoubhani]

taaaaaaaanks

[@crimpflyer7073]

Bhai ye photu download kar sakte hai

[@aeroer4942]

can have source code from github maybe ?

[@toheebolanrewajuolagoke6364]

i love this, Thank You

[@RupomHalder-x1v]

imag size plz

[@sheldontorres7103]

Thank you ^_^

[@cybzz]

Amazing!! Thank you 🙂. Does the pictures have to be same size (dimension) ?

[@siwarhabli6608]

Please do you have the code?

[@baipaganapathidevachakrava1338]

no

[@baipaganapathidevachakrava1338]

@@siwarhabli6608 done

[@negi177]

Hello, Can you put audio exactly under those picture and how,thanks

[@shirullahmohammadi353]

Hello bro i had followed your stipe but it didn't work i don't know why

[@soiyed8905]

how i can add photos after web hosting

[@munnanil6359]

what a beast XD ty man

[@lomilomineinei5620]

do i need to resize my photo to fit this

[@lomilomineinei5620]

please help me

[@courageiwendi6639]

When I click family photos it doesn't respond

[@RupomHalder-x1v]

img size?

[@Anuchamath_Sathsara]

can give the templete of this

[@bhoomikat3689]

Can u make it responsive ??

[@fastxweb]

U can make this responsive by using media query. Its too much easy.

[@bhoomikat3689]

@@fastxweb can u please tell me how ?? Becoz u r using grid so i cant make responsive to 1 image in phone size

[@fastxweb]

In grid system we can use grid template row or columns. If we use grid-template-column 4 or 5 in normal disply. And if we want to show 2 pr one column in responsive view or mobile view just we need to change the value of grid tenplate column 2, 1fr 1fr mean equal frectional

[@nedelchonedelchev5310]

@media screen and (max-width: 1500px){ .photo-gallery { grid-template-columns: 1fr 1fr 1fr; } } @media screen and (max-width: 1200px){ .photo-gallery { grid-template-columns: 1fr 1fr; } } @media screen and (max-width: 700px){ .photo-gallery { grid-template-columns: 1fr; } }

[@sajidpp92]

👍👍👍

[@MazisEditing]

how can I put image hover text different for different images please help

[@nicsalmon9987]

did you figure this out? I would like to know too.

[@arnavpadwal4464]

vo sab to theek hai, but code kaha hai?

[@georgetsamis8940]

what sizes is your photo ?

[@svarshithkumar3847]

where can i get this code

[@gautamjoshi2329]

Please share this code i need it in urgent

[@Pedrocrafteur]

The code CSS is not valid for me !

[@shivamdubey4783]

sir could you plzz provide source code for this

[@dododoaa3908]

جميل بجد 🧡

[@cuuteshots6116]

hhh charaftana

[@fionaanoif5653]

7:34

[@fionaanoif5653]

9:36

[@samanthahaque699]

does not work!!are you doing SCSS? how can u call classes with space and two words !

[@justinlikith3570]

Hey i want to give seperate name for each picture then how can anyone help me?

[@nurerisyayazid6619]

do i need to resize my photo to fit this ? because it doesnt working anyway nice video

[@nedelchonedelchev5310]

in .pic{...} i added: ascpect-ratio: 3/2 and it looks better.

[@Myuzishin]

To all you people who are too lazy to provide an accompanying audio explananation of your videos, don't. I promise I will click away (like I did here) after about 10 secs.

[@suggu_sandeep_passion]

Source code Please

[@pramuditharanganath1646]

can you give me a github code

[@RamzesHQ]

how zoom after click any1 knows?

[@elliotcarlhedmusic7450]

can someone help me link the photos to a hypertext document?

[@mohitraj4068]

last part of the code isnt working

[@Gua10ify]

row 76, css, its didnt work.

[@Bulitt1]

could you provide source code please.....I typed everything along with you and for some reason my photos just don't do what your do

[@alexcoutu212]

same here, have you find a solution ?

[@shubhamkderolia1825]

yes, i am also facing same issue,if you know how to resolve it can you please respond

[@pradipsharma1934]

@@shubhamkderolia1825 ya same issue that's why dislike of this video is hidden i guess

[@fitzysbaby2677]

@@pradipsharma1934 took me a bit but I got it all working, I made a gallery using a few different videos and piecing them all together. so basically when u go to gallery page it displays low size image thumbnails as a preview, at the top i took this guys method so it shows "all" photos, "x" photos & "y" photos. then when on desktop you can move mouse over photos which adds a border and enlarges it slightly. Then i took another guys lightbox method so when you click on the photo it opens into a lightbox which loads the actual full sized image allowing a nice viewing experience. its also fully responsive and works on all devices from cell phones to tablets to desktops and its nice and fast as it only loads all the lower sized thumbnails first and then 1 by 1 for full sized photos.

[@ynsandy89]

@@fitzysbaby2677 can you give me video nr2?

[@standforlife1]

9:46

[@manish-uh1ng]

Please share me code....

[@emmanuelafedziebotwe3908]

Can you share the code please

[@simoid6246]

source code please

[@sandeepbhat8933]

can u pls share the code?

[@gehadoman3122]

can send code?

[@urieltrejovilla3509]

could you pass me the code please

[@mdgrs22]

I need a source code

[@mudithachandima2760]

4:20

[@onix_gaming]

Bro please give me source code...

[@leopardboos]

cood link?

[@aeroer4942]

check #teg not working any solution ? anyone ?

[@Saurabhss_]

plz share source code

[@markajsamboang1751]

plss send me the code

[@dodioutright]

source code please sir :v

[@aludarasampath]

can you share the source code ?

[@cuuteshots6116]

if you just copie paste you will earn nothing bro

[@tyrion2965]

@@cuuteshots6116 do you have the source code I mean it is not runninh

[@mihajlo4641]

can u send me a source code?

[@teamstrengthsgaming5538]

How can I contact you?

[@fastxweb]

[e-mail]

[@Gamingwithsushantlive]

@@fastxweb bro how you write in the right side of pages

[@javascript_code]

git hun no