Can I copy this cool effect with CSS?

I recently came across a very fun-looking CodePen by Gayane Gasparyan, and I wanted to see if I could recreate the effect.

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:38 - What I’m starting with
01:18 - The HTML
03:23 - Starting the CSS
05:55 - Adding the tilt
07:56 - Adding the shadow under the card
14:32 - Preventing the shadow from rotating
19:26 - Adding the vignette on hover
22:40 - Adding the logo
30:30 - Adding the second image on hover

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[vasyaqwe]

this might be just the coolest thing i've seen done with css. Great job Kevin

[ichiroutakashima]

12:58 Words spoken by a true developer. 😂
"I don't try and do things perfectly, I try and get them to work..."

[rj]

It always amazes me. You provide not only complex answers in a simple fashion but mostly I am surprised that someone is providing such high quality content and knowledge for free on YouTube while sharing most importantly the whole thought process on how one should approach a certain issue. You sir are a legend and have made my life very very easy. As a backend developer trying to understand UI and UX it was getting very frustrating before coming across your videos and here I am now sharing your content and suggesting your channel to every one going through same frustration. Can't thank you enough but thanks.

[ethansc]

Super cool effect and I love these long-form videos where you’re going through the whole process showing the pivots, please keep them coming!

[islamali]

16:14 Man, I like the fact that you kept improvising all the time, Cheers from Egypt.

[TheRealFreekBos]

I am totally new at css and even though I don't understand that much it really showed me the power of css. Thank you for that!
I also really love the trial&error type of video you made! Perfect...

[henson_prod]

I just love how you solve and figure things out as you go.

[RDA]

i like the way you face problems and fixing it after toughts and figuring thing out .thank you so much for this useful content

[deltaromeo]

This was really fun to create. I made a Zelda one with Link popping out. Thank you for doing the tutorial.

[adryeeel]

Love this videos building from scratch! Please, do more. I learn a lot.

[GodsZoldier]

i honestly find your thought process comforting

[slavg-kl]

Just at 7:07 you know this is some magic stuff going on. Thank you for your awesomeness.

[ABanksy]

So awesome man. I like that you kept the googling in the video! I think a lot of new people assume you have to remember and recall every property with ease or you arent doing it right.

[Ayydos]

This was amazing, more of these please!

[kushagragour]

Enjoyed this walkthrough! Great stuff as always, Kevin! ^_^

[codytownley]

Love it! Truly enjoy the thought process!

[marquisegbunike]

awesome try there. To me, you got it right. you're extremely good in CSS breaking it and moulding it back.

[ThugLifeModafocah]

the skill is unbelivable. Thank you and congratulations.

[Drazyhaze]

I enjoy your like nervous/half laughs where you're unsure if your choice is correct lol.

Gives me a good chuckle cause I heavily relate. Nice video.

[MaralTheGameGirl]

This is one of the coolest effects I've seen