Change border width when hover will change the location of the elements

1

I am working on the homework Build a Personal Portfolio Webpage.
https://codepen.io/hchen/full/gvPxPW/

I have a grey border for my projects, and its width is 2px. I want to make it 5px, and orange when hover to it.
And here is the setting for each project

 <div class="col-xs-12 col-sm-4" >
       <div class="project-class" >

.project-class {
  border-style :solid;
    border-color: #8c8b8b;
    border-width: 2px;
  margin:5px 5px 20px 5px;
}

.project-class:hover {
  border:5px solid orange ;
}

But it changes the location of nearby elements when hover.

After some research, I updated it to

.project-class:hover {
  border:5px solid orange ;
  margin: -1px;
}

And in big screen, other elements doesn’t move, but the size of selected element is still changed. When in this size - col-xs-12 , it still moves the other elements.

After more research, I made it working by using the outline instead of border.

But I still want to know what margin: -1px does in this case, and why margin: -1px doesn’t work in small screen.

Thanks.

2

You can do this with css pseudoclasses:

.element:hover {
  /* your styles */
}

To make it smooth, you can use the CSS transition property.

3

Thank you. I accidentally posted it when typing …

Still need help on this question.

4

OK,

If I understand correctly, my solution would be to adjust your margins. Right now you have:

.project-class {
  border-style :solid;
    border-color: #8c8b8b;
    border-width: 2px;
  margin:5px 5px 20px 5px;
}

.project-class:hover {
  border:5px solid orange ;
  margin: -1px;
}

I would want to adjust it so the margin exactly compensates for the change in border. The border is increasing by 3px so I would want the margin to exactly decrease by 3px:

.project-class {
  border-style :solid;
  border-color: #8c8b8b;
  border-width: 2px;
  margin: 5px 5px 20px 5px;
}

.project-class:hover {
  border: 5px solid orange ;
  margin: 2px 2px 17px 2px;
}

And of course project-class can be further reduced to:

.project-class {
  border: 2px solid #8c8b8b
  margin: 5px 5px 20px 5px;;
}
2 Likes
5

Thank you for your explanation.

I see my problem now.