CSS Responsive Card Hover Effects | Html & CSS

[@stef8147]

that background beat hard AF

[@mikiyaskelifa853]

I am in love with this KZbin channel

[@ibrahimdua]

For 'align-items:center' to work, apply 'height' to the container.

[@fabionevez5926]

thank u !

[@vd4538]

how much height? mine is aligned on top...

[@soreuq97]

thanks

[@soreuq97]

@@vd4538 650px worked for me you can try

[@sanchezp330]

Dude! THAT is way too cool, so simple yet so attractive and engaging. Thanks

[@abenezerttz599]

Omg the most underated tutorial channel..

[@thomas_hatt_died]

Bro has 942,000 subscribers wdym underrated 😂

[@DeepakKumar-ec1bi]

Best web Front End Developer 😘

[@hananmo9109]

I'm in love with your work 🌸❤💫

[@haizenash193]

Very simple but impressive.

[@mohankumar349]

downloaded images should be of same size and in css .container {height:100vh} is missing, you need to add it; otherwise, things won't work well. Great tutorial, thank you.

[@gokulakrishnan6587]

Hello in responsive view When we click first content the second content doesn't go down Please reply

[@surenderoati]

Simply awesome ❤️❤️🤗🤗

[@sherieklappenbach4858]

The music though!! 👌

[@Trip_Cloud_Music]

Fantastic brother👌👌👌😍

[@utkarshasagar4570]

Sir you are really awsome as u always come up with amazing ideas..................

[@gameplan5295]

If it was possible I would have given you millions of likes

[@unezasaifi786]

what is the size of the images?

[@AbuBakar-om7ir]

Very nice keep it up brother.

[@lcalves2577]

How big are the images?

[@waynehendricks1529]

Very nice brother. I like the responsiveness. Very simple and elegant. Thank you.

[@TheElkster]

Awesome, simple, effective! Thanks for sharing! :)

[@Henry_Nunez]

Excelente. Como hago para hacer lo mismo pero que el texto que esta debajo lo extraiga de una base de datos.?

[@siddhartharoy5263]

Awesome bud ! Kudos !

[@hamdsahar384]

You Are a best Teacher! Thanks for awesome videos!

[@ganeshsoni2614]

U have no subscribers af carry or bb or ashish but aap humare dil mein raaj karte ho

[@OnlineTutorialsYT]

Thanks bhai....apna apna choice h

[@PixelatedBrain7]

@@OnlineTutorialsYT i love you irshad bhai

[@adrian3355w]

You're the Sachin Tendulkar of front-end design :D

[@karentrevino6904]

Love the visual effect, thanks for sharing!!!

[@pattaraphongt.7853]

Amazing work....always. Thanks for sharing.

[@joegiusti528]

Awesome tutorial, thank you

[@ruchiray8557]

Amazing content

[@himanshshakk3083]

Op brother Thanks for this I learned it the properties you used here is very simple nice work

[@ulisesmartinez410]

Creative cards, good motivation.

[@abdulasilva2712]

E se eu quiser colocar mais 4 cards, posso??

[@OnlineTutorialsYT]

4-5-6-7 any numbers of card you can use...just add "flex-wrap: wrap" in container... If you want to add 4 cards in a row...then adjust width of box and container

[@ISBEL2609]

i will going to try this, i really hope that this time I approve it xD

[@NargaKuruga]

Thanks man ! Love your channel !

[@yogeshjangid3696]

Awesome sir

[@vaibhavthakur691]

in mobile and tablet once i click the card,it opens up but after clickin the same card again it doesn't close????? any solution????

[@romskiller308]

'Best video on KZbin' #danishwebcreator

[@gameplan5295]

You are really creative

[@krypton9378]

please someone tell me whats the width and height of the images he used in this video

[@rajasega2889]

super tutorial super tutorial

[@carolinach9114]

Hola, una pregunta, las imagenes que tamaño tienen?

[@sergiosoaresnunes1601]

omg, beautiful animation and so simple to create... You're so good, thanks for help us. Greetings from Brazil :D

[@nubmuitonub4741]

dale mano

[@Leeshen143]

What apps do you use?

[@KothaleMansi]

When I hover on a card my rest cards slightly moves downwards with their images and when I hover out the rest of the cards moves upwards I don't know why

[@MalteS.]

I have that problem, too.

[@KothaleMansi]

@@MalteS. I got its solution Just give max-height:100px(or you may adjust the pixels according to your code) to the div you have created before the division card. I hope this will help you

[@MalteS.]

@@KothaleMansi Thanks I will try it later 🙂👌

[@harshbhardwaj1242]

@@KothaleMansi i try to add it to my project but all box are showing vertically in place of horizontally

[@trevor4370]

Great stuff, I learnt heaps today. Thanks you

[@tommychoco6]

Thank you, yeah this one is great, it is responsive!

[@khan.hassan]

Amazing!

[@tiefsoftwarelab]

i,loved you code

[@barklegneeshetu8048]

I Love all of your contents. Amazing Man! keep up the good work, we are learning so much from you. Love form Ethiopia

[@shashankpandey1966]

Big fan sir

[@vedantthakur2669]

what was actual size of those images??

[@binwalk44647]

Awesome!

[@sebastianogiuriati2901]

Hi, it doesn't work the automatic adjust for each device, in mobile also are inline and not one underneath the other, i'm using shopify

[@nikelida1]

Hello, thank you for video. Please explain why you use position: relative for blocks with classes container, card and content? I undastand whay you used position: relative for block with class imgBx (adding of Top and Left),but whay you used position: relative in other blocks?

[@ambikasir1572]

Sir I also do everything you do I love your videos I always like

[@sergiu6650]

In order for it to work properly .Container { justify-content: left; align-items: left;}

[@wilsonbenny2555]

Love your work, man. You're awesome. 10 stars for you. But I don't possibly get same result as your final outcome because I believe some codes are missing.

[@TheJacklwilliams]

His vid's are teasers. If you want the source code he has a link to his patreon. Become a member to get access. As well as a link to his Udemy courses. To be honest, not a bad idea considering the quality of work he does and his depth of knowledge in front end dev. Looks like a good value to me. I read some reviews of his Udemy courses and there are a few comments regarding music / code alongs (like these) so he still needs to do work with narration / discussion of WHY he's coding something a particular way, etc... However, I think, this way works too it just forces you to do the legwork to uncover the why in most cases.

[@thatcorporategirly]

What changes are we suppose to make if are making this in a section of a whole website

[@sayyidahmursidah4452]

very cool. I want to make it too

[@bhagirathiverma2627]

thanks 😍

[@biswajitnayak7457]

Hi, I work over your code and it is done everything working fine except the first one card giving trouble to me. How can I solve it?

[@jordansalazar1482]

A question: why do you select two even three classes? Is not enought with just select the class in specific?

[@ruchiray8557]

Sometimes you might have other element with same class , so in order to apply CSS to only that particular element ,he selects that many classes

[@jordansalazar1482]

@@ruchiray8557 TYSM!

[@DavidElstob73]

Tidy! Simple clean and easy to replicate, as always.

[@phamvinh5424]

how to auto-reload like in the video?

[@Christfemme]

I love this, but I did what you did in this video in its own separate project file (not adding it to mine), and the entire row of cards shifts down when one of them opens. How can I fix this?

[@harshbhardwaj1242]

I'm facing same problem

[@lucasportilho3458]

O melhor !!

[@SANTOSH-pc9pm]

Sir everything u create is just assume. Am do all of these

[@OnlineTutorialsYT]

Thanks ...you like

[@_.sunnyraj._]

First learn grammar

[@without-name2531]

@@_.sunnyraj._ 😂😂😂😂

[@indlulzsec9962]

@@_.sunnyraj._ 😂

[@PureAlbania]

How's the responseness on desktop when opening a card in multiple rows of cards. Why you didn't show that?

[@OnlineTutorialsYT]

Its responsive bro

[@PureAlbania]

@@OnlineTutorialsYT Yes, you showed the responsiveness. I meant on a desktop with multiple rows of cards, when you open a card, what will happen to the cards on the subsequent rows? At 0:30 we can have an idea but not much. Liked the animation smoothness when opening a card.

[@romuloalves9349]

Ótimo vídeo parabéns 👏 .

thanks guy

[@opmani5738]

it's not working properly, in different image size ,, help

[@jawadhussainnarejo3745]

Nice

[@срожиддинмаматов]

very nice

[@zeffali]

smooth

[@RANDOMMANIA-jp8bv]

Awesome code Sir I liked it. Please share the images you used

[@thankyou797]

노래제목좀알려주세요^^

[@thatcorporategirly]

From where we will get the link of import google api u used in css ?

[@dundiramesh4086]

Broo u are creating a amazing tutorial 😍😍 Please provide images link or give the dimensions please 🤗🤗

[@OnlineTutorialsYT]

Use any size of square image...min width and height is 260px

[@dundiramesh4086]

@@OnlineTutorialsYT please give for ever video

[@satyammishra5869]

Use source.unplash for phtos of any size Thanks me later

[@Jimil_soni]

If anyone knows plzz let me know the name of this theme of vs code

[@Haictt1311]

Sir, why did u all use position:relative ?

[@rishabhdevpandey]

Irshad Sir...I tried making these CSS Cards but there were some minor issue...90% success achiived...please help sir...you are my inspiration

[@ranaahmmed4996]

Just wow...

[@lanawebgrafgraficaesites8429]

Thanks for help me!

[@kevinrizkyanaputra1936]

thx dude

[@codaacademy5888]

i put the cards horizontally , put when i hover one the other cards have some move ,why that ?

[@360videospot]

Don't forget to put min-height: 100vh; (in body css)

[@kodetumbuh]

Where i can download those images?

[@OnlineTutorialsYT]

You can use any image

[@kodetumbuh]

Thank you for your respon

[@krypton9378]

@@kodetumbuh bro did you used any images??

[@ankushsonone8433]

Sir why you not make a group in telegram.

[@Javoke]

Just as each video you make, its awesssssssssssommmmmeeeee!! You have a great talent!! Tnx for sharing!!

[@sanskarsrivastava9694]

Can u give a solution by adding a button if site is viewed in mobile screen

[@sanskarsrivastava9694]

Reply to mine question as well!!

[@hogvarts]

I use scss and no text appears on hover. and if you turn on the hover forcibly in the inspection, then everything works (it's a shame *sorry.>google translate (

[@meosamudazai]

I'm 50 second late

[@ganeshsoni2614]

😂😂😅 i am 10 minutes

[@moviesclip1734]

please write code in description box

[@halikar7152]

hello, good tutorial, how can this be a post without re-creating content in the code section.

[@darkalpha6530]

In my project, these are not coming in flex. They are coming vertically aligned. :(.

[@harshbhardwaj1242]

Same problem...if you get solution tell me

[@darkalpha6530]

@@harshbhardwaj1242 Ok I will.

[@selwiwi]

@@darkalpha6530 Hey did you find any solution???

[@darkalpha6530]

@@selwiwi Yes, I switched to another card design from another video 👍👍.

[@selwiwi]

@@darkalpha6530 owwww ok I found a solution by adding the flex-wrap:wrap; to the body instead of the container

[@joseavila3979]

Hice todo igual y no me sirvióel código

[@thexbwolf4998]

Me pasó lo mismo :(

[@GisellenRosa]

I will try :3

[@bukqueiroz]

THANK U

[@kohbangsai5735]

what's a song ?

[@juansebastiansandoval4532]

Do you have the code without having to get into that patreon thing?

[@redditverse6511]

yes Join the KZbin membership and he posts it in the members forum. only $4.99

[@Bellsprout123]

My text won't show up :

[@ilhamnopihendri5146]

It's cool