CSS Responsive Card Hover Effects | Html & CSS
Enroll My Course : Next Level CSS Animation and Hover Effects
www.udemy.com/course/css-hove...
------------------
Join Our Channel Membership And Get Source Code of My New Video's Everyday!
Join : / @onlinetutorialsyt
------------------
Source Code : / source-code-css-36865035
Patreon : / onlinetutorials
Facebook Page : / onlinetutorialsyt
Instagram : / onlinetutorials_youtube
Twitter : / onlinetutoria16
Website : www.onlinetutorialsweb.com
Пікірлер: 190
Dude! THAT is way too cool, so simple yet so attractive and engaging. Thanks
Awesome, simple, effective! Thanks for sharing! :)
Very nice brother. I like the responsiveness. Very simple and elegant. Thank you.
Love the visual effect, thanks for sharing!!!
I am in love with this KZread channel
I'm in love with your work 🌸❤💫
You Are a best Teacher! Thanks for awesome videos!
Omg the most underated tutorial channel..
Thank you, yeah this one is great, it is responsive!
Amazing work....always. Thanks for sharing.
Very simple but impressive.
Awesome tutorial, thank you
Thanks man ! Love your channel !
Awesome bud ! Kudos !
Great stuff, I learnt heaps today. Thanks you
omg, beautiful animation and so simple to create... You're so good, thanks for help us. Greetings from Brazil :D
@nubmuitonub4741
3 жыл бұрын
dale mano
Simply awesome ❤️❤️🤗🤗
that background beat hard AF
Best web Front End Developer 😘
Sir you are really awsome as u always come up with amazing ideas..................
Ótimo vídeo parabéns 👏 .
I Love all of your contents. Amazing Man! keep up the good work, we are learning so much from you. Love form Ethiopia
Op brother Thanks for this I learned it the properties you used here is very simple nice work
Creative cards, good motivation.
Very nice keep it up brother.
i will going to try this, i really hope that this time I approve it xD
Amazing!
Just as each video you make, its awesssssssssssommmmmeeeee!! You have a great talent!! Tnx for sharing!!
You are really creative
Tidy! Simple clean and easy to replicate, as always.
Amazing content
Awesome!
Fantastic brother👌👌👌😍
Awesome sir
For 'align-items:center' to work, apply 'height' to the container.
@fabionevez5926
4 жыл бұрын
thank u !
@vd4538
2 жыл бұрын
how much height? mine is aligned on top...
@soreuq97
2 жыл бұрын
thanks
@soreuq97
2 жыл бұрын
@@vd4538 650px worked for me you can try
The music though!! 👌
i,loved you code
You're the Sachin Tendulkar of front-end design :D
Thanks for help me!
O melhor !!
Sir I also do everything you do I love your videos I always like
super tutorial super tutorial
If it was possible I would have given you millions of likes
Awesome code Sir I liked it. Please share the images you used
very cool. I want to make it too
Big fan sir
Just wow...
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
2 жыл бұрын
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.
thanks guy
very nice
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
3 жыл бұрын
Hello in responsive view When we click first content the second content doesn't go down Please reply
Nice
thanks 😍
Excelente. Como hago para hacer lo mismo pero que el texto que esta debajo lo extraiga de una base de datos.?
thx dude
THANK U
smooth
'Best video on KZread' #danishwebcreator
I will try :3
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?
hello, good tutorial, how can this be a post without re-creating content in the code section.
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?
It's cool
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????
E se eu quiser colocar mais 4 cards, posso??
@OnlineTutorialsYT
4 жыл бұрын
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
What changes are we suppose to make if are making this in a section of a whole website
U have no subscribers af carry or bb or ashish but aap humare dil mein raaj karte ho
@OnlineTutorialsYT
4 жыл бұрын
Thanks bhai....apna apna choice h
@PixelatedBrain7
4 жыл бұрын
@@OnlineTutorialsYT i love you irshad bhai
In order for it to work properly .Container { justify-content: left; align-items: left;}
From where we will get the link of import google api u used in css ?
Broo u are creating a amazing tutorial 😍😍 Please provide images link or give the dimensions please 🤗🤗
@OnlineTutorialsYT
4 жыл бұрын
Use any size of square image...min width and height is 260px
@dundiramesh4086
4 жыл бұрын
@@OnlineTutorialsYT please give for ever video
@satyammishra5869
4 жыл бұрын
Use source.unplash for phtos of any size Thanks me later
Sir everything u create is just assume. Am do all of these
@OnlineTutorialsYT
4 жыл бұрын
Thanks ...you like
@_.sunnyraj._
4 жыл бұрын
First learn grammar
@without-name2531
3 жыл бұрын
@@_.sunnyraj._ 😂😂😂😂
@indlulzsec9962
3 жыл бұрын
@@_.sunnyraj._ 😂
please someone tell me whats the width and height of the images he used in this video
How big are the images?
Hola, una pregunta, las imagenes que tamaño tienen?
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
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
3 жыл бұрын
I'm facing same problem
what is the size of the images?
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.
3 жыл бұрын
I have that problem, too.
@KothaleMansi
3 жыл бұрын
@@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.
3 жыл бұрын
@@KothaleMansi Thanks I will try it later 🙂👌
@harshbhardwaj1242
3 жыл бұрын
@@KothaleMansi i try to add it to my project but all box are showing vertically in place of horizontally
What apps do you use?
Irshad Sir...I tried making these CSS Cards but there were some minor issue...90% success achiived...please help sir...you are my inspiration
thank you soo much sir, you have given me confidence to promote my channel #codemyhobby
Sir, why did u all use position:relative ?
How's the responseness on desktop when opening a card in multiple rows of cards. Why you didn't show that?
@OnlineTutorialsYT
4 жыл бұрын
Its responsive bro
@PureAlbania
4 жыл бұрын
@@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.
I'm 50 second late
@ganeshsoni2614
4 жыл бұрын
😂😂😅 i am 10 minutes
Sir why you not make a group in telegram.
i put the cards horizontally , put when i hover one the other cards have some move ,why that ?
@360videospot
4 жыл бұрын
Don't forget to put min-height: 100vh; (in body css)
what was actual size of those images??
Do you have the code without having to get into that patreon thing?
@redditverse6511
4 жыл бұрын
yes Join the KZread membership and he posts it in the members forum. only $4.99
These cards have a fixed height, so if you add a few lines of text, it won't work...
A question: why do you select two even three classes? Is not enought with just select the class in specific?
@ruchiray8557
3 жыл бұрын
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
3 жыл бұрын
@@ruchiray8557 TYSM!
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 (
please write code in description box
Where i can download those images?
@OnlineTutorialsYT
4 жыл бұрын
You can use any image
@kodetumbuh
4 жыл бұрын
Thank you for your respon
@krypton9378
3 жыл бұрын
@@kodetumbuh bro did you used any images??
Nice work. But making it responsive for mobile screens is useless. Can't hover on mobile devices.
@OnlineTutorialsYT
4 жыл бұрын
Its responsive.....just click for mobile instead hover
노래제목좀알려주세요^^
Can u give a solution by adding a button if site is viewed in mobile screen
@sanskarsrivastava9694
4 жыл бұрын
Reply to mine question as well!!
🤩🤩🤩🤩🤩🤩🤩
how to auto-reload like in the video?
done
Bro, what is difference between justify content and align item. I searched on web but i got confused about cross axis and main axis😅
@rayon9353
3 жыл бұрын
Align items let you position your elements vertically while justify content does horizontally
@tausifkovadiya1810
2 жыл бұрын
Justify Content set your element along the Main/Primary axis where as Align Items set at Secondary Axis. For Example : If you set "flex-direction" to "column" for your main div, then your main axis is vertical & Justify Content : Center sets your Element on Vertically Center. here if you set Align Items : center then it sets it to secondary axis that is horizontally center. So act according to primary axis (Justify Content) & secondary axis (Align Items). Hope this helps.