About Jumping content solved using Border and transparent

Community resources General
#1

Dear all,
Good afternoon,
Nice to meet you, I had an issue at the moment of making a landing page when I hovered my content , it began to jump, I read some solutions on the web, and I found that using a border with the same width I used for my div, and also using transparency it helped , so I tried and it worked, I would like to know what is the direct relation between hover , border and transparency?.
Thank you all in advance,
Best regards,
Ivonne

#2

hi @Ivonne this forum is about Webflow but your question is about CSS basics, you should have basic understanding of HTML and CSS before you start building a website.

However, :hover is pseudo class that allow you to make some changes when your mouse pointer move over an element. If you add border on hover you are adding extra space into box. More about box here.

So when you add border let say border-bottom: 1px solid transparent than you can change on hover only its color. But when you add border only on hover you will add extra space that cause shift of element.

.my-element{
    border-bottom: 1px solid transparent;
}

.my-element:hover{
    border-color: red;
}

This is very short explanation and I will suggest to take any free CSS course on internet to get better understanding how things works. :wink:

1 Like
#3

Hi Stan,
Thank you for your kind explanation and your time,
I definitely will register to a free CSS course on internet,
I struggle always with it. Thank you again, and have a Blessed beginning of the week :pray:

1 Like
#4

hi @Ivonne if you don’t have further questions related to this topic feel free to check any response as solution to mark this request as solved

Have a nice day :wink:

#5

Hi Stan,
Perfect , and thanks again :pray: