Stunning HTML & CSS Card Animation

In this video we will show you how to create a stunning card animation using HTML & CSS only.
Source code: github.com/webtutorialsw/css_...
Get the images:
wirestock.io/james591
stock.adobe.com/contributor/2...
Do you like our work? Support us 💛
www.buymeacoffee.com/webuitut...
#css #html #htmltutorial #csstutorial #animation #cssanimationtutorial #cssanimation #csscard #ui #ux #webdesign

[@Melynt]

actually sick use of those inputs :D love it and saving it for later usage idea

[@HGGdragon]

Really clever use of the radio elements! nicely done :)

[@webuitutorials]

Thank you very much!

[@guilhermealmeida6169]

@@webuitutorials Friend, I loved your work and repeated it, but one thing that bothered me a bit is that I couldn't save the photo. We clicked on it, it opens, but we can't close it like when we open the website. Is there a way to fix this? What can I do?

[@zeeshanali4502]

background-position: center; background-size: cover; background-repeat: no-repeat; These three property in your div will be cherry on top , and makes the center position will be always seen even if it is closed and transition will also look stunning . ( love your work )

[@webuitutorials]

Thank you very much!

[@erpetek]

smart usage of radio buttons, i thought you're going to use javascript

[@user-lr1yf7ro5y]

Same

[@lukenaylor6458]

There should've been "no js" in the thumbnail. I also wasn't expecting this creativity.

[@BastiRIP]

This is absolute stunning!! I just started to lern HTML/CSS/JS ...but this blew me away!!!

[@FernandoJosedosSantos-fw8xw]

You have no idea of how much this helped! THANK YOU SO MUCH!

[@denil312]

It was so detailed ! Thanks so much for that !❤

[@omidsedighi-mornani9166]

Sehr hilfreiches Video! ♥

[@joshuadauntless934]

I'm new to html. But It works! big thanks!

[@Mawuko-SenyoHayibor]

Amazing tut thank you so much

[@sumittiwari3731]

Really amazing work bro ❤❤

[@raghavendra5230]

Thank you 👌continue like this with different ways👍

[@prabhjotsingh69]

Really amazing work brother

[@Grow20]

osm work buddy!!! fantastic 💡

[@FushigiMigi]

Awesome!

[@row2sky]

Потрясающе 'аплодисменты'

[@deojefflai6826]

This is beautiful

[@jameswagner2882]

looks amazing!!

[@ndwho]

This video is gold ngl

[@uzairmohammed7]

it's really cool ❤

[@RetArm]

Very nice. Thanks for the lesson.

[@Ditebogomojapelo]

This is beautiful! inspiring for a noob like me

[@Weird-Mike]

Even though I rarely hand code much anything these days, it's refreshing to watch coding from scratch. Cheers!

[@bogdankp]

Yes, leg coding took over my life too.

[@not-fake-human]

​@@bogdankpfyi you can't code with you legs , use butt

[@stefanr9653]

why so? cuz there is already everything on the internet?

[@guruware8612]

@@stefanr9653 Should read: "there is already everything copied on the internet" One new idea.. 705354 copies, not even bothering to adjust little things. The majority of "web-designers" are only able to copy/paste things without knowing how things work. Ask that self-proclaimed specialists to create a web-site just by using notepad. It all started when ms-word dared to generate html. It will get worse, AI tools are coming: then we get the same idiotic images everywhere, and people will think its "cool".

[@Xgil2Play]

Call me old-fashioned, but it's the only way I can ensure things work the way they're supposed to.

[@ConsumerCreditEducationTV]

I needed to see this ❤

[@MrValdepenas]

Cool stuff 👍🏻

[@smithsmith3503]

Wow, nice great job

[@calvinkawuma9029]

Thank u so much 👍

[@AnkitKumar-vw1dm]

Amaining video😍.

[@MHR664]

Great!!

[@MegaMaliak]

Nice!!

[@nazishkiran]

wow very nice logic

[@xDeadlyWarriorX]

I rarely code anything from scratch, only using UI Components from Material, Bootstrap, etc, but this one looks super bro! Congrats.

[@webuitutorials]

Thanks!

[@trainerdevesh]

Without Javascript great work

[@toniojoestar3212]

thank you :)

[@nazmulhassan5010]

awesome animation

[@pauldanielvanschevikhoven4551]

This works great Thnx

[@AKATSUKIbd]

wow thanks

[@ihelpdogs]

Looks great. How's it look on mobile devices with width set at 600px?

[@salvatoreinchiappa3340]

clever use of radio element! Amazing job bro/sis

[@modyahmed783]

Nice video, using radio like that was actually really clever. When clicking on label and it starts expanding (the widths increases), some times the expanding animation is rigid and it stutters, and idea how to fix that ?

[@stivomoses8882]

topnotch creativity

[@not_amanullah]

nice ❤

[@user-rs4pl5ge2x]

Thanks for the example! But how to return the previous state in the form of columns when moving the cursor to the side

[@paulojorge59]

Wow muito top...

[@sunny.sophie]

That's a creative way to get these card effect, nice! :) Sadly it's not accessible and also not W3C compliant (div in label), so I would never implement it like this.

[@judboss1176]

amazing

[@BillyBober]

Can you do something similar to this with a tags if I wanted to have an image description but when you click on the tabs it brings you to a new page?

[@Martin-ru3yn]

Beautiful! Really nice work. Just want to ask. Is this a good approach from a semantic or SEO point of view, putting all the content between label tags?

[@webuitutorials]

Thank you! Honestly, I do not know exactly to what extend it affects SEO. But considering that there is not that much text per slide anyway, this should not be a significant problem

[@sunny.sophie]

Hey :) I also don't know how it affects SEO, but is is not a good approach from a semantic point of view and it is not accessible.

[@kutu258]

speed running my 1 week on this project :D

[@gkail6980]

Cool story bro, what does it look like on mobile?

[@zongoboy]

clever

[@ahmetsoner9106]

Emeğine sağlık ❤ Eğer bu animasyonda solda ok ve sağda ok olan bir slider olsaymış ve kullanıcı oklara tıkladığın ortaya gelen resim otomatik açılıp sola giden veya sağa giden resim otomatik kapansaymış efsane bir animasyon slider olurmuş

[@webuitutorials]

Great idea, I will keep that in mind

[@ahmetsoner9106]

@@webuitutorials Teşekkür ederim ❤

[@AlexLoLar]

hi guys, use details instead the inputs, the details tag conteint open atribut, on this is most easy than inputs

[@HenHouse_Pins]

I did this project 3 years ago in a udemy course. lol

[@jheanbrizadao2429]

Valeu um vídeo pequeno , mas com muito conhecimento em css e html

[@carlosbarross]

Será que aprende algo sem mesmo explicar as tags?? Sei o básico de html e CSS ksks

[@mhd_Code]

👏

[@DerTheoGD]

nice work! where did you get the images from though?

[@webuitutorials]

Thank you, you can find the images either on stock.adobe.com/de/contributor/211435115/James or wirestock.io/james591

[@user-dp4gv9mu3k]

How can i make it responsive for mobile screen ? in what part can I add that css part?

[@shazamshakeel6577]

Is there any library for reactjsfor these type of carousel ?

[@nikilragav]

I'm a little confused by 2 things: how come you don't need to define a width on the icon so that it's always a circle (as opposed to some other shape). How come when you put the styles for the text, they disappeared? I don't think overflow hidden should make them disappear?

[@AesSedai2020]

This is really pretty, however, with more images, it starts to stutter, any idea how to solve this? thx

[@GupthaKreations]

This is will be much better if it was responsive. btw nice work. ❤

[@webuitutorials]

Thanks! I might post an updated version but it should be very easy to do it by yourself there is not much to change

[@pauldanielvanschevikhoven4551]

@media (max-width: 766px) { .wrapper { margin-top: 400px; } .container { height: 1200px; flex-direction: column; } .slide { width: 400px; align-items: flex-start; } .slide > .row { flex-direction: column; } .slide > .row > .icon-1, .icon-2, .icon-3 { width: 50px; } .slide { height: 80px; } .slide > .row > .description { height: 500px; width: 400px; } input:checked + label { height: 600px; width: 400px; } } Change this, but watch the width's and height's. I've changed some for my project

[@GupthaKreations]

@@pauldanielvanschevikhoven4551 thanks g 🖤

[@thomasbaker2155]

@@pauldanielvanschevikhoven4551 legend

[@lukenaylor6458]

I think for the purpose of showcasing "the trick", it makes sense to cut down on other complications. Responsive design is an orthogonal topic and a "solved problem" really. Overall I think this was a brilliantly designed video concept.

[@shibalnugamingyt5611]

Hello, how do I resize this for mobile?

[@robertzohrabyan3316]

Thank you, can you please make it also responsive?

[@pauldanielvanschevikhoven4551]

@media (max-width: 766px) { .wrapper { margin-top: 400px; } .container { height: 1200px; flex-direction: column; } .slide { width: 400px; align-items: flex-start; } .slide > .row { flex-direction: column; } .slide > .row > .icon-1, .icon-2, .icon-3 { width: 50px; } .slide { height: 80px; } .slide > .row > .description { height: 500px; width: 400px; } input:checked + label { height: 600px; width: 400px; } } Change this, but watch the width's and height's. I've changed some for my project

[@Mourad2112]

Can you please help for making it responsive (mobile devices )

[@Ducky_8624]

I'm a beginner with html, I tried to do the same as you but for some reason only tags 1 and 2 appear.

[@Ben94]

Can you share the custom cursor pack you have? I really like how it looks

[@webuitutorials]

The cursor is the default one from the KDE Breeze theme

[@Ben94]

@@webuitutorials thank you very much :D

[@usmoxandev795]

Awsome!! Is this VS Code??

[@webuitutorials]

Thank you! No, that's neovim

[@sp_dragoyt6236]

How to work in Responsive?

[@piedosopedro8117]

dang

[@Yesterday_i_ate_rat]

Awesome, ❤❤ Btw, which ide are you using in the video ?

[@webuitutorials]

Thank you! I am using neovim in the video

[@LionMister]

What a Chad.

[@marjhuncantago9476]

Now, how can I make link inside the description?

[@AdrianaKo33_ESP]

i put in container justify-content start for horizontal view but its not working

[@webuitutorials]

Try writing flex-start instead of start

[@AdrianaKo33_ESP]

@@webuitutorials do you have any discord or something ? I have a photo with the results

[@ifeanyinnaemego]

I need your setup for vim

[@sunnyheheheh9401]

how and where can I learn this stuff, I want to make these stuff on my own, does it work like exploring css and html only my own by just building stuff and googling at the same time or is there some resources for those,

[@Tomo-gi7di]

KZbin is your best friend! Thousands of hours worth of free content that you can use to learn.

[@webuitutorials]

Try to replicate small code snippets from other people and try to understand them. After some time you will be able to adjust them to your own needs or build the things you imagine on your own. Watching some beginner tutorials for HTML and CSS on KZbin would make the process much easier

[@xtan-yt]

You can't draw even though you know how to use a pencil. Try to convert UI designs to code. Also don't look at the code !

[@Artstd0099]

which screen recorder do yo use???

[@webuitutorials]

OBS (Open Broadcaster Software)

[@DirtyFan2]

Can this land me a front end job if i know this + make a few beautiful websites with different animations like this etc? Also do i need to know this from scratch or does every developer search everything from the web? I can create a website but i feel like i am taking 99% from different resources, like a puzzle game. Am i doing this correctly??

[@webuitutorials]

Hey yeah that's normal that's how I worked some time ago. But with every project you do you learn and memorize additional things. For a job the result is more important but having to search things up might take longer for the projects to finish. Try to learn from scratch and you'll be able to recreate what's on your mind without the need to do excessive research

[@DirtyFan2]

Too much learning, development is such a broad field i don't feel like learning everything from scratch. I feel like excessive research is more fun but idk. Maybe IT is not for me. I am currently in an internship as a web developer ( super easy project ) at a vocational school, but i am soon graduating and i will apply myself to university of applied sciences, but idk if i want to take IT major this time. Thanks for the reply =) @@webuitutorials

[@riphatrashid]

It would be great if you could provide the source of the images

[@webuitutorials]

I bought them at wirestock: wirestock.io/james591

[@FEELING_ECCHI]

Is this used in website ? I have yet to learn website development so I have no idea what this is but I have saved it

[@webuitutorials]

Yes, you can use the code on your own website if you would like to or use it as a resource to learn HTML and CSS

[@FEELING_ECCHI]

@@webuitutorials thx 🙂

[@andyl9920]

Can you explain why 'checked' was deleted from 2,3, and 4 but left on 1 in html?

[@webuitutorials]

The inputs are radio inputs, that means only one can be checked at any time. That creates the effect: if you check a new one, the old one gets unchecked automatically. So only the slide that should be open on page load should have the vale checked

[@siMeowGamimg]

Railwind version please

[@shivamray3794]

did you cleared the CHECKED from your HTML code.?

[@ivanzq21]

at 6:18 I did not understand why u removed the "Checked" from c2,c3 and c4

[@webuitutorials]

The checked one is the default card that is open on page load. As I was copying the inputs in the beginning, I forgot to remove the checked attributes from the other inputs (it made no sense to check all because only one of them can be checked at any time)

[@ColdbloodFlower]

Honestly I am feeling a bit stupid but it just doesn't seem to work on my end. I have tried several things but VS always tells me that the input tags need closing.

[@webuitutorials]

It shouldn't be a problem using html. Did you compare your code with the source code I provided? The code should work in your webbrowser, too

[@deviques]

Why does the '.card' have 2 border-radius settings?

[@webuitutorials]

you're right, it's a mistake, just take the second one

[@sanjulgupta]

great use great this is that it's not javascript

[@Aman-kf6wx]

bro i cant put image in card

[@AYYUB1Y]

Pc and mobile plz😢

[@estrelladeaurora6065]

in NVIM omg...

[@pushkalkishore1184]

Where is the source code of the video. Please upload the GitHub link for the source code

[@webuitutorials]

Here you go: github.com/webtutorialsw/css_sliding_cards

[@Thisismuhiuddin]

Is it responsive?

[@webuitutorials]

Probably not, wasn't the main goal. Make it if you need, should be very simple

[@grischpel]

better is width: fill-available;

[@_Sunfall]

What is a code editor?

[@webuitutorials]

I am using neovim in the video

[@_Sunfall]

thank you

[@NIW3.]

where are the images?

[@webuitutorials]

links have been updated in the description

[@marjhuncantago9476]

my text didn't turn into number. HELPPPPPPPPPPPPPPPPP!

[@webuitutorials]

Send me a link to your code and tell me your browser I will try to help you

[@marjhuncantago9476]

what the HECK XD. I tried to copy/paste the code from Github to myCSS and the result is same. the Text isn't fixing....

[@marjhuncantago9476]

FIX*

[@webuitutorials]

What browser do you use? If you'd send me a link to your code I could quickly look through it

[@Ked_gaming]

I'm pretty sure this is copied from some codepen, how does this make it into a 100k+ views video is beyond me

[@seshdbn]

So this is where Codepens go to die. Bet.

[@tolannn]

Нацс

[@othoapproto9603]

fun, but why would I make my views work so hard to view my work?