3D Flip Card Effect On Hover Using Only HTML & CSS

[@danroyndungu1190]

I spent 4 hours making this in Javascript, arigato for showing me the right way Sensei

[@NOTHING-en2ue]

great video ❤

[@ohiwantyoutobelieve]

the best one so far, thanks

[@hugocangi6214]

Good morning and good week I finished your video, thank you greetings I liked it

[@oussamagamal3861]

Merci pour tout les information

[@ГерманСтоянов-г7ъ]

Good job! I find your tutorials very useful!

[@allanlima1075]

Your channel is very good🇧🇷🇧🇷🇧🇷

[@kaima8084]

Good job, but better with sound off

[@sanjogsilwal9477]

Can you make a video on how to combine css and html in detail for making a full website?

[@ttempaa]

HTML, CSS & JS one love ❤

[@ragibshahariar6852]

Alhamdulillah. That was very helpful for me, Thank you.

[@samucalegal1]

Teu canal é uma maravilha!!

[@maisamhussaintoorie7119]

Really outstanding ❣

[@Jose1990gon]

amazing I am learning a lot with your codes.... Thanks

[@jeffreynwankwo7912]

I did too

[@florianmolnar5848]

You deserve 100k+ subs, your videos really useful!

[@omkarkhandalkar5]

Bro For that 100k people should know atleast basics of css

[@braintechtamil1188]

Good Job man keep it well

[@Madman-xk2si]

nice vid.

[@judasbaloi8976]

Nice video bro

[@DarkCodeOnline]

Thanks

[@kellynjenga899]

Thank you for sharing this video, it surely helped me solve problems concerning that effect...

[@goczbela8469]

thx men! great tut like always

[@hawkeye904]

thanks bro for all your vids they are amazing

[@cactuscot]

Dude thank you for sharing your Skills with us! Very useful. 👍🏻

[@dimeadozengaming4286]

Great vid

[@n_fan329]

Si lay hafdek a khouya ❤️

[@mrketchupp-ketchupp]

Esta muy bueno...!

[@anonymone4459]

Awesome bro!

[@webtutorials5353]

Perfect 👌 card))

[@guylemay1471]

Simple idea nicely done - thank you!

[@mariyakerfati6947]

I really like it so much , thank you for all your video ❤❤

[@lambo-ca]

Great animation.

[@kiwigmr1813]

Hey DarkCode! What did you use to create your intro and outro?

[@hareendranmg]

Awesome work bro😍

[@kartikchoudhary2824]

thanks a lot good job

[@joaopaulo-pr3xb]

thank u,ure awessome dude

[@pascalmuganza2105]

I liked it this is awesome!

[@juwelrana2640]

which software are you using for coding???

[@kajalmandal1128]

can i use this for my youtube channel

[@VictorSilvaDev]

Top demais !!!

[@chintanrabadiya6625]

very good tutorial for new creation. I like this channel very much.

[@guibeabdel6806]

Great guy be blessed

[@jefersonmedeiros7677]

Great, man! Like...

[@asmerommicheal7729]

Fantastic thank you so much

[@DakiraMC]

that's awesome

[@syediqbalahmed3176]

good ....

[@atroid5910]

i love u men u r the best

[@hieunotes]

Good, thanks

[@Kids_Darshika_TV]

your video are very helpful

[@DarkCodeOnline]

thank you

[@alexanderzhidkikh7536]

7:06 - At this moment I didn’t quite understand what this phrase ".card: hover > front" means - is this the Flip effect? 2:57 - Here is also an incomprehensible moment - as we immediately registered the property "position: absolute;" where we have a parent element with the property "position: relative;" ? For which we are positioning the block with the class "middle"?

[@codewithjarvis8629]

you can save this channel fo css things: kzbin.info/www/bejne/hqDEgpSIaKmLis0

[@maxinesherrell6215]

This is exactly what I want to be able to do THANK YOU! However, being completely new to Wordpress I am building pages via Elementor - can I use this code somewhere to be able to do this on the images on the page? 🤔🤨🙄

[@JEsterCW]

You're amazing.

[@johanijohani1800]

Great! Best regards

[@luhurfatah4829]

Awesome

[@grigoldvali4124]

Hi, can you post link of fontawesome, this link which you linked in HTML ?

[@DarkCodeOnline]

try to use this one

[@grigoldvali4124]

@@DarkCodeOnline thanks

[@kurtharvey9041]

can i add additional cards on the same page? because when i try the two cards overlap each other

[@avarussell4553]

@Kurt Harvey I am having the same issue. Did you find a solution?

[@RainOnline]

thanks bruv :D

[@k12moyo]

Will this work on css grid? The grid container can be rotated with their content?

[@pritammehta7770]

Will donate you for sure bro

[@rockaldeano]

very cool effect, but when I refresh the page the animation starts itself without me hovering the card. How can I prevent that?

[@juliemaury2105]

Same problem here ! anyone found a solution to that problem ? I have been trying to solve this for days...

[@alidemircomtr]

Good Job!

[@felipe0liveira274]

Fantastic

[@leofofodk]

Is it possible to implement this effect on a website created in wordpress?

[@ভবেরশহর-ড১ষ]

❤

[@dattebayobla-bla7945]

Why after the page is updated, the class .back is transformed from 0 to 180 deg if I haven"t yet cursor over the picture?

[@AbhishekKumar-mq1tt]

Thank u for this awesome

[@DeveloperX]

visit this for new design: kzbin.info/www/bejne/omLHh4d5odJsq8U

[@milandupalo9679]

Can I put button instead of icon?

[@rap01011]

what track is playing at the beginning?

[@sunilroka4782]

If i want to do flip three and four image then what i do plz answer

[@nut049]

Очень круто! Very cool!

[@لاالهالااللهمحمدرسولالله-ث1ل]

Woo easy

[@ErkanOkman]

👍👏

[@lakellakel9418]

work on mobile ?

[@jeffreynwankwo7912]

Fast and interesting tutorial

[@karthiksr992]

Is it a '*' in the first line of style.css or is it a star shape ??

[@shivayagoel]

Its a star which denotes for all content

[@karthiksr992]

@@shivayagoel thank you Can you tell me that if its a ' * ' or ' ★ '

[@shivayagoel]

*

[@karthiksr992]

@@shivayagoel thank you 💓

[@stefanvichev8882]

can anyone tell me why when I turn off the .middle{position:absolute}property the image file stops respecting the set width and height of 100% of the div parent and is now referencing the body

[@ShivamGupta-nz7dy]

You got really cool videos, thanks to youtube that I found you. In fact, thanks to God.

[@zettabyte8282]

What is the song on your intro

[@syah5679]

Dark paradise

[@AxmedShiimax]

Watching good

[@AmarGaikwad_gaikwadamar1991]

cool

[@zzz-go6yq]

What program is this

[@op5357]

Atom

[@privatprivat6629]

What is atom

[@techshab9060]

My best chennal is DARKCODE

[@DarkCodeOnline]

thank you

[@SnirSigawi]

Thanks a lot! It's super useful. I got one problem after I rotated my picture, I had to rearrange it position and it fucked up everything. Can you please help me with it?

[@itmegltchyy3620]

How do i bring "index.html preview"...?

[@DarkCodeOnline]

install html-preview package

[@itmegltchyy3620]

@@DarkCodeOnline thanks

[@chastityishikawa7833]

Is it possible to code it on a notepad??

[@DarkCodeOnline]

yes

[@chastityishikawa7833]

@@DarkCodeOnline Thank you! By the way i love your videos💓

[@DarkCodeOnline]

thank you

[@junaidchauhan1216]

Thanks Sir

[@steinsg8gaming853]

Where can i download the text editor?

[@DarkCodeOnline]

Atom.io

[@DeveloperX]

visit this for new design: kzbin.info/www/bejne/omLHh4d5odJsq8U

[@danielluna7648]

Got a Pen of this somewhere?

[@akbarpulatov640]

Thanks for tutorial. It will be better if you upload the source code into github, and make a link in the description.

[@element4225]

I cannot understand classes you use. There is no middle or card class in html and still it is working.

[@DarkCodeOnline]

Bro the classes name in html its random we use it for select the element in css or js for example

[@element4225]

@@DarkCodeOnline I did not know that you can create class with space in name and to reference use only second part :) still thank you for your movies are really helpful see ya :)

[@svenrichey5803]

@@element4225 With using space you can combine several classes, in this case .card and .middle. This gives you a better flexibilty in design.

[@omega3723]

@@element4225 I also did't understand,why he use first and second part of class separately.

[@element4225]

We can give more than just one class to an element :)

[@ТигранОвакимян-д1х]

просто лучший! бро, где ты этому научился? может книги посоветуешь?

[@sakshiramsinghani5284]

Hey it's a great tutorial, I just got one doubt. What if I have to use multiple cards in a row? I can't provide the class name card middle to all the cards because then they would all coincide with each other. Can anyone please help me with inserting multiple cards on the page?

[@maxinesherrell6215]

Did you find a way of doing this?

[@elmeddinx]

how do we do this with js?

[@mnarifin8852]

I have tried it, but when using the atom the result is the same but when run on chrome it is not the same and the logo does not exist, please help,

[@vanyavoskres]

read about vendor prefixes

[@juliemaury2105]

Hi ! First of all, thank you for this video ! As mentioned by someone in the comments before, there is a problem with with code. When you refresh the page, there is a rotation happening, and I have been trying to get rid of that but I did not find a solution. Could someone help me please ?

[@vivekmaan9806]

Whatsapp me 6397792014

[@BBBootstrap]

Hey can we collaborate?

[@aleksandarbelgrade6188]

Github??

[@info-Travels]

can you make an admin panel complete in php......plz do this if you can !......

[@jontydahat7024]

Android studio, make something by it

[@shivayagoel]

My image is not rotating please solve🙏🏻

[@balakrishnanyukesh1646]

Amazing work sir.I tried this but the content in back is reversed😔.Some one help me please!

[@tahirgarayev6224]

who can tell: i want to replace one font awesome icon(e.g. facebook icon) to another (e.g. twitter icon) with pure css (without js) on hover or checked state. How it can be done?

[@allysondossantossilva6875]

maybe the code would be something like this: element.icon { background: url("facebook icon"); } element.icon:hover { background: url("twitter icon"); }