Search code examples
htmlcssmargin

Hoverd Pricing Column is Moving an Image Below It

I have my column's borders change size when they are hovered on. But it moves the position of my image below them. I tried increasing the margin bottom of the columns so that it doesn't effect the image. But that did not work. I also tried using the z-index property, but that had no effect as well. What is the best way to fix this issue?

Code Pen: https://codepen.io/isaiahwebdev/pen/zWjyEJ

.plans-col {
  width: 33.33%;
  float: left;
  padding: 10px;
  margin-bottom: 40px;
  text-align: center;
}

.plans-price:hover {
  cursor: pointer;
  border: 10px solid #eee;
}

.plans-price .title {
  margin: 50px 0;
}
Solution

  • It's because of a border that is different width when you hover. Whenever you are applying any transformation, the borders need to stay the same width. The trick is to apply the transparent border for the object before hover. 

    .plans-price {
  list-style: none;
  border: 10px solid transparent; 
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.082), 0 6px 20px 0 rgba(0, 0, 0, 0.082); 
}

.plans-price:hover {
  cursor: pointer;
  border: 10px solid #eee;
}

    Now, I have seen that your original plans-price had border of 1px. You have a few options here:

    1. use my solution where object doesn't have initial border,
    2. keep my solution for the transparent border but add 'faux border' using solid inset box-shadow of 1 px and the desired color or
    3. change the initial border width to 10px

    Enjoy :)