CSS Responsive Card Hover Effects | Pepsi Card UI Design

u are amazing bro, thanks so much!!

If you put this project in your CV and you don't get a job then.. the employer is not in the right frame of mind!

excelente!! muchas gracias

nice seeing you exhaustively fixing screen sizes and getting a perfect result

el mejor desarrollador web, soy tu gran fan, saludos desde Cuba

Thanks you are a big motivation.

u r unique
keep growing

thank u sooooooooooooooooooooooooooooooooooooooooooooooooooooooooo much brother

Hi. I've been watching some of your videos lately. It was fantastic but while coding this effect I ran into a problem. My circle did not move. Here's my code can you me where I did wrong. Thank you very much

.card{
position: relative;
width: 600px;
height: 350px;

border-radius: 20px;
display: flex;
align-items: center;
border-radius: 20px;
transition: 0.5s;

}

.card.cicle{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 20px;

}

.card .circle::before
{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: red;
clip-path: circle(120px at center);
transition: 0.5s;
}


.card.circle:hover:beore
{
background: red;
clip-path: circle(400px at center);
}

bro why this css not working while I link bootstrap??

great one!

I cannot get the code to run properly, is there a certain extension you are using on visual studio to see the code when you run it?

you are doing perfect job! thanks a lot!

great tutorial! How to trigger the hover event when displayed on mobile? Thanks!

Visualmente é muito top, mas na pratica não rola!!!! infelizmente!

O problema é a resistividade de 3 ou mais itens na tela principal.. um é fácil papai!!!!

WOW YOU A VERY AMAZING CODER! MUCH RESPECT!

why do you add the same background music in all these videos???

Give source code free..

very excelent animation

Thanks a lot for this, have a beautiful lifee 😊🙏

well done !!!

One of the Best HTML CSS tutorial ever 🔥🔥🔥🔥🔥

Again. And reapeat to every film. I love your style, your tuts, your creativie.

I LOVE YOUR CONTENT

Bro i could have never done this purely in css. I would have needed to use JS.

How about explaining what you are doing there?

Good work bro keep it up we learn many thinks from you bro

I can't get the image 'cause it is leaving me at a facebook page :(. Pls, there's a way to get the image for me?

I loved seeing people from all over the world thanking you for your work. One more thanks from Brazil, keep it going bro, amazing content!

god bless you brother

It is much easier with jquery animation you should try it also ,thanks

Boss kabhi bol Kar bhi Bata Diya Karo ki kab konsi chiz kise lagane se kya ho gaya aur in ko achieve kaise Kare

I loved it

Great tutorials. Thx 4 sharing!

Sir i am poor i can't afford to buy source code 😥😥

great..... juob Thank you

🔥🔥❤❤

The hover doesnt work on mobiles, so what should be the replacement for them ?

amazing lesson im just following you trough my vscode and the result was outstanding...just keep it up....hugs from Brazil!!

You say its responsive but mobile phones dont have a mouse to hover on top of the image so how will this work for mobile phones ?

You are a genius man!!! Tanks a lot!!!!!!

very good job brother, keep it up, your tutorials serve me a lot! greetings from Argentina

Well you deserved my support <3

Awesome! thank you man!!!

Awesome!!!!!!! Thank you! So cool!

Would you be able to show the progress as you did in the nike shoe tutorial. It really helps understand the process. Thank you, your tutorials and work is breathtaking.

The best!! Thanks’ in from Perú 👏🏻👏🏻

Why use another element (.circle) intead apply :before on .card?

Please please, let's get this channel to 1M subscribers. His contents are really crazy!!