CSS Card Hover Effects | Html CSS

[@coolbard]

I think 'Online Tutorials' are the best in css and to me You are the best boss❤️❤️❤️❤️❤️👏👏👏👏

[@5555Elenka]

Спасибо что увеличили экран) Мне с плохим зрением всё стало видно ) У Вас очень хорошие уроки !!!!!!!!!!!🤗

[@coolbard]

I will always is support of you. Thank you Soo much for all your hard work for such an amazing work. You are the boss.

[@muhammadzainalarifin2253]

my favorit video on KZbin, Online tutorial 👍👍👍👍

[@Webnoob]

Awesome Hover Effect, thx for sharing. Stay tuned ;-)

[@trhtechnology330]

this perfect recomended chanel

[@codewithyunus8423]

Nice work brother 👍

[@RO5AN]

For lazy people...:) ---------------------------------------------------------------------------------------------------------- index.html ---------------------------------------------------------------------------------------------------------- Responsive boxes Post title One Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Post title Two Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Post title Three Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ______________________________________________________________ style.css ______________________________________________________________ @import url('fonts.googleapis.com/css?family=Poppins'); body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #003e46; font-family: 'Poppins', sans-serif; } .container { width: 1000px; display: flex; flex-wrap: wrap; justify-content: space-between; } .box { position: relative; width: 300px; height: 400px; background: #000; box-shadow: 0 30px 30px rgba(0,0,0,.5); } .box .imgBx { position: relative; top: 0; left: 0; width: 100%; height: 100%; } .box .imgBx img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: 0.5s; } .box:hover .imgBx img { opacity: 0; } .box .content { position: absolute; bottom: 20px; left: 10%; width: 80%; height: 60px; background: #fff; transition: 0.5s; overflow: hidden; padding: 15px; box-sizing: border-box; } .box:hover .content { width: 100%; height: 100%; bottom: 0; left: 0; } .box .content h3 { margin: 0; padding: 0; font-size: 20px; } .box .content p { margin: 10px 0 0; padding: 0; opacity: 0; line-height: 1.2em; transition: 0.5s; text-align: justify; } .box:hover .content p { opacity: 1; transition-delay: 0.5s; }

[@rnggaming4705]

thanks man

[@charlemagneabrigo5808]

Thanks a lot

[@northerntower7953]

now fly away hero.

[@princesslorreine]

thank you sir:>>

[@just_rashu]

Can't copy from KZbin comments 😢

[@derikjoelgarcialemus738]

muchas gracias excelente video me ayudo mucho

[@karthikkeyan2590]

awesome video. Realy very useful

[@quartzer4008]

Really amazing. Thats really helpful.

[@slappy_chimp]

Awesome 😊👍

[@agranshuaggarwal3947]

Awesome sr

[@Unimaz_Studios]

Muy bien video bro, LIKE

[@mdasadahmed2769]

Its very nice .. thnx from ❤️

[@j3froc63]

From 2:00-2:35 ish, I don't get why you had to write Css styling for both .box .imgBx AND .box .imgBx .img? Couldn't you have just written the Css for .box .imgBx .img?? Both had the same code but .box .imgBx .img has object-fit and transition thats it...

[@srinualla6497]

what is video editing software your using

[@hasnainhasan8819]

Bro can you tell me the name of your editor

[@akashrajkr5800]

I got everything right but the boxes are stuck to top (not vertically centered)...what to do?

[@OnlineTutorialsYT]

Use min height 100% in body

[@vigneshchinnappa5117]

Nice bro,

[@Jimil_soni]

Bro how do you such ideas?👌👌👌😳

[@pratikmankar4864]

Awesome

[@Webnoob]

Yes ;-)

[@jonneeelll6488]

please ser help me to position the boxes in scrolling the web pages

[@jonneeelll6488]

ser message me to help me pls. ser

[@Faizankhan-sk3ic]

i am the first who watch ur vid

[@Webnoob]

I was the twentieth, too slow^^

[@Deus-lo-Vuilt]

thanks video

[@ekagaluhputra1998]

good job

[@gammingedge8379]

music?

[@kurdator2711]

I love you man 😁♥️

[@Webnoob]

Yes, he does a very good job :-)

[@kurdator2711]

@@Webnoob He isn't the only one , but he is the best ✌

[@sudeeptaadas03]

Hello, I need your help how I can contact to you ?

[@mohdsuhel5372]

How can I make it responsive

[@Webnoob]

Fun with S. K you can use css media querys for mobile devices.

[@OnlineTutorialsYT]

Ok....i'll upload tommorrow

[@mohdsuhel5372]

It really helps me a lot

[@ekagaluhputra1998]

from me you can save source code in your github account and share to your subscriber

[@ck-empire8125]

Brother how to make app with cards

[@lucapoulsen4996]

Is it responsive?

[@OnlineTutorialsYT]

watch part 2...link in video description

[@iluminando-se8202]

Mais alguém aqui esta curtindo dos vídeos?

[@lovems2217]

I love you boos I love you

[@lorenzessensohn5565]

great job, please show us where we can download the source code

[@musharafhussain2316]

can you give the link to code

[@mauriciovillalba1065]

Buenísimo tener el código (Good to have the code, I would appreciate it)

[@shivanigavali6527]

It's not working properly

[@Mr_Moe_Lesterr]

PLEASE SHARE THE CODE!

[@wolfisraging]

Don't you have any other background music????

[@Webnoob]

Rishik Mourya Which music do you like? I use different kinds of music. 😉

[@OnlineTutorialsYT]

Please mute audio

[@vasper5968]

dont use this telescope zoom. Please

[@fattehalisunasarasunasara4111]

Same to same coding karte he to bhi output nhi aata

[@slowmen8910]

No source code, sorry im unsubscribe

[@YusifBayramov]

Thank you bro, i made some changes in the design, i would be glad if you check your e-mail.

[@Happy_Shaikh]

Is it responsive?