title: Hoverd Pricing Column is Moving an Image Below It
body: <p>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? </p>
  
  <p>Code Pen: <a href="https://codepen.io/isaiahwebdev/pen/zWjyEJ" rel="nofollow noreferrer">https://codepen.io/isaiahwebdev/pen/zWjyEJ</a></p>
  
  <pre><code>.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;
  }
  </code></pre>