3D Flip Card Effect On Hover Using Only HTML & CSS
Рет қаралды 257,328
5 жыл бұрын◘ Join our group in facebook : / 70490. .
◘ Like our page : / darkcode0
◘ Paypal Donation Link : paypal.me/YBenlachheb
◘ Download Files From Here : goo.gl/A7mDWG
◘ Music Name : NIVIRO ft. PollyAnna - Fast Lane [NCS Release]
◘ Music Link : • NIVIRO ft. PollyAnna -...
@danroyndungu1190 3 жыл бұрын
I spent 4 hours making this in Javascript, arigato for showing me the right way Sensei
@user-fk4ro5ue8l 5 жыл бұрын
Good job! I find your tutorials very useful!
@florianmolnar5848 5 жыл бұрын
You deserve 100k+ subs, your videos really useful!
@omkarkhandalkar6069 4 жыл бұрын
Bro For that 100k people should know atleast basics of css
@kellynjenga899 4 жыл бұрын
Thank you for sharing this video, it surely helped me solve problems concerning that effect...
@cactuscot 5 жыл бұрын
Dude thank you for sharing your Skills with us! Very useful. 👍🏻
@sanjogsilwal9477 5 жыл бұрын
Can you make a video on how to combine css and html in detail for making a full website?
@anonymone4459 5 жыл бұрын
Awesome bro!
@goczbela8469 5 жыл бұрын
thx men! great tut like always
@guylemay1471 5 жыл бұрын
Simple idea nicely done - thank you!
@mariyakerfati6947 4 жыл бұрын
I really like it so much , thank you for all your video ❤❤
@Jose1990gon 5 жыл бұрын
amazing I am learning a lot with your codes.... Thanks
@jeffreynwankwo7912 5 жыл бұрын
I did too
@ohiwantyoutobelieve 3 жыл бұрын
the best one so far, thanks
@hawkeye904 4 жыл бұрын
thanks bro for all your vids they are amazing
@samucalegal1 5 жыл бұрын
Teu canal é uma maravilha!!
@kiwigmr1813 5 жыл бұрын
Hey DarkCode! What did you use to create your intro and outro?
@jefersonmedeiros7677 5 жыл бұрын
Great, man! Like...
@pascalmuganza2105 5 жыл бұрын
I liked it this is awesome!
@chintanrabadiya6625 5 жыл бұрын
very good tutorial for new creation. I like this channel very much.
@hareendranmg 5 жыл бұрын
Awesome work bro😍
@n_fan329 5 жыл бұрын
Si lay hafdek a khouya ❤️
@JEsterCW 5 жыл бұрын
You're amazing.
@asmerommicheal7729 5 жыл бұрын
Fantastic thank you so much
@lambo-ca 5 жыл бұрын
Great animation.
@guibeabdel6806 4 жыл бұрын
Great guy be blessed
@braintechtamil1188 4 жыл бұрын
Good Job man keep it well
@ttempaa 5 жыл бұрын
HTML, CSS & JS one love ❤
@alidemircomtr 5 жыл бұрын
Good Job!
@atroid5910 5 жыл бұрын
i love u men u r the best
@AbhishekKumar-mq1tt 5 жыл бұрын
Thank u for this awesome
@DeveloperX 4 жыл бұрын
visit this for new design: kzfaq.info/get/bejne/opeUibd00dOdpZc.html
@maisamhussaintoorie7119 2 жыл бұрын
Really outstanding ❣
@hieunotes 5 жыл бұрын
Good, thanks
@RainOnline 4 жыл бұрын
thanks bruv :D
@pritammehta7770 5 жыл бұрын
Will donate you for sure bro
@webtutorials5353 4 жыл бұрын
Perfect 👌 card))
@VictorSilvaDev 4 жыл бұрын
Top demais !!!
@johanijohani1800 5 жыл бұрын
Great! Best regards
@user-cq6rh8rl7n 4 жыл бұрын
просто лучший! бро, где ты этому научился? может книги посоветуешь?
@DakiraMC 5 жыл бұрын
that's awesome
@felipe0liveira274 5 жыл бұрын
Fantastic
@mrketchupp-ketchupp 5 жыл бұрын
Esta muy bueno...!
@joaopaulo-pr3xb 3 жыл бұрын
thank u,ure awessome dude
@Kids_Darshika_TV 5 жыл бұрын
your video are very helpful
@DarkCodeOnline 5 жыл бұрын
thank you
@jeffreynwankwo7912 5 жыл бұрын
Fast and interesting tutorial
@SnirSigawi 4 жыл бұрын
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?
@dattebayobla-bla7945 5 жыл бұрын
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?
@hugocangi6214 16 күн бұрын
Good morning and good week I finished your video, thank you greetings I liked it
@dimeadozengaming4286 4 жыл бұрын
Great vid
@ShivamGupta-nz7dy 5 жыл бұрын
You got really cool videos, thanks to youtube that I found you. In fact, thanks to God.
@kartikchoudhary2824 4 жыл бұрын
thanks a lot good job
@oussamagamal3861 2 жыл бұрын
Merci pour tout les information
@NOTHING-en2ue Жыл бұрын
great video ❤
@luhurfatah4829 5 жыл бұрын
Awesome
@AmarGaikwad_gaikwadamar1991 5 жыл бұрын
cool
@Madman-xk2si 4 жыл бұрын
nice vid.
@ragibshahariar6852 3 жыл бұрын
Alhamdulillah. That was very helpful for me, Thank you.
@RichMindset-RM 3 жыл бұрын
Alfuckoff
@rap01011 5 жыл бұрын
what track is playing at the beginning?
@nut049 5 жыл бұрын
Очень круто! Very cool!
@jontydahat7024 5 жыл бұрын
Android studio, make something by it
@syediqbalahmed3176 4 жыл бұрын
good ....
@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? 🤔🤨🙄
@k12moyo 4 жыл бұрын
Will this work on css grid? The grid container can be rotated with their content?
@kaima8084 2 жыл бұрын
Good job, but better with sound off
@junaidchauhan1216 5 жыл бұрын
Thanks Sir
@sunilroka4782 5 жыл бұрын
If i want to do flip three and four image then what i do plz answer
@allanlima1075 2 жыл бұрын
Your channel is very good🇧🇷🇧🇷🇧🇷
@info-Travels 5 жыл бұрын
can you make an admin panel complete in php......plz do this if you can !......
@alexanderzhidkikh7536 5 жыл бұрын
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 4 жыл бұрын
you can save this channel fo css things: kzfaq.info/get/bejne/htWRhMSDmKq8hJ8.html
@AxmedShiimax 4 жыл бұрын
Watching good
@kurtharvey9041 4 жыл бұрын
can i add additional cards on the same page? because when i try the two cards overlap each other
@avarussell4553 3 жыл бұрын
@Kurt Harvey I am having the same issue. Did you find a solution?
@akbarpulatov640 3 жыл бұрын
Thanks for tutorial. It will be better if you upload the source code into github, and make a link in the description.
@ErkanOkman 5 жыл бұрын
👍👏
@tahirgarayev6224 4 жыл бұрын
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 3 жыл бұрын
maybe the code would be something like this: element.icon { background: url("facebook icon"); } element.icon:hover { background: url("twitter icon"); }
@judasbaloi8976 4 жыл бұрын
Nice video bro
@DarkCodeOnline 4 жыл бұрын
Thanks
@stefanvichev8882 2 жыл бұрын
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
@juwelrana2640 4 жыл бұрын
which software are you using for coding???
@juliemaury2105 4 жыл бұрын
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 3 жыл бұрын
Whatsapp me 6397792014
@milandupalo9679 5 жыл бұрын
Can I put button instead of icon?
@sergiopauloneves 5 жыл бұрын
very cool effect, but when I refresh the page the animation starts itself without me hovering the card. How can I prevent that?
@juliemaury2105 4 жыл бұрын
Same problem here ! anyone found a solution to that problem ? I have been trying to solve this for days...
@sakshiramsinghani5284 2 жыл бұрын
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?
@leofofodk 3 жыл бұрын
Is it possible to implement this effect on a website created in wordpress?
@user-xq6pz3cx2w 4 жыл бұрын
Woo easy
@user-oe7wp3cn5d 2 жыл бұрын
❤
@kajalmandal1128 4 жыл бұрын
can i use this for my youtube channel
@balakrishnanyukesh1646 3 жыл бұрын
Amazing work sir.I tried this but the content in back is reversed😔.Some one help me please!
@elmeddinx 5 жыл бұрын
how do we do this with js?
@danielluna7648 4 жыл бұрын
Got a Pen of this somewhere?
@techshab9060 5 жыл бұрын
My best chennal is DARKCODE
@DarkCodeOnline 5 жыл бұрын
thank you
@itmegltchyy3620 5 жыл бұрын
How do i bring "index.html preview"...?
@DarkCodeOnline 5 жыл бұрын
install html-preview package
@itmegltchyy3620 5 жыл бұрын
@@DarkCodeOnline thanks
@mnarifin8852 5 жыл бұрын
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 5 жыл бұрын
read about vendor prefixes
@BBBootstrap 4 жыл бұрын
Hey can we collaborate?
@faraon1781 5 жыл бұрын
How to add 2 card
@shivayagoel 4 жыл бұрын
My image is not rotating please solve🙏🏻
@zettabyte8282 5 жыл бұрын
What is the song on your intro
@syah5679 3 жыл бұрын
Dark paradise
@lakellakel9418 4 жыл бұрын
work on mobile ?
@steinsg8gaming853 5 жыл бұрын
Where can i download the text editor?
@DarkCodeOnline 5 жыл бұрын
Atom.io
@DeveloperX 4 жыл бұрын
visit this for new design: kzfaq.info/get/bejne/opeUibd00dOdpZc.html
@grigoldvali4124 9 ай бұрын
Hi, can you post link of fontawesome, this link which you linked in HTML ?
@DarkCodeOnline 8 ай бұрын
try to use this one
@grigoldvali4124 8 ай бұрын
@@DarkCodeOnline thanks
5 жыл бұрын
How name edito
@Harpagophytum67 4 жыл бұрын
Can you slow down the volume, please.
@element4225 5 жыл бұрын
I cannot understand classes you use. There is no middle or card class in html and still it is working.
@DarkCodeOnline 5 жыл бұрын
Bro the classes name in html its random we use it for select the element in css or js for example
@element4225 5 жыл бұрын
@@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 5 жыл бұрын
@@element4225 With using space you can combine several classes, in this case .card and .middle. This gives you a better flexibilty in design.
@omega3723 5 жыл бұрын
@@element4225 I also did't understand,why he use first and second part of class separately.
@element4225 5 жыл бұрын
We can give more than just one class to an element :)
@pedroarias1353 2 жыл бұрын
CRACKKKKKK