css Question posted in
Some basic documentation can be found here.

Make element pop out & change background color without shifting text css

The main idea is that the class .pop-out transforms the code to change background, pop up off the screen a bit (scale & shadow), etc. The only problem is, there is no padding on my original element to the left and right, so it would look very weird when I pop it out without adding more padding as part of the transition.

When I do add padding, it shifts the text as there is now a different amount of horizontal space. I cannot add padding before hand, or the text will be misaligned. How can I fix this?

I currently have the following code:

* {
  box-sizing: border-box; 
}

.pop-out {
    position: relative;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out, border-radius 0.2s ease-in-out;

    &:hover {
        cursor: pointer;
        background-color: white !important; 
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        transform: scale(1.1);
        border-radius: 10px;
        padding-left: 1rem; 
        padding-right: 1rem;
    }
}

#wrapper {
  margin-left: 50px;
  display: flex; 
  justify-content: center; 
}

#my-element {
  background-color: gray;
  width: 200px; 
  flex: 0 0 auto; 
  
}
<div id="wrapper">
  <div class="pop-out" id="my-element">
    My element. lipsumlipsum      </div>
</div>
Tags:

2

Answers


  1. 0

    Please check this code we have using padding normal class remove for hover:

    CSS code:

    * {
    box-sizing: border-box;
}

.pop-out {
    position: relative;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out, border-radius 0.2s ease-in-out, border 0.2s ease-in-out;

    /* Creating space between an element and its border */
    border-radius: 10px;
    border-left: 1rem solid transparent;
    border-right: 1rem solid transparent;

    &:hover {
        cursor: pointer;
        background-color: white !important;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        transform: scale(1.1);
    }
}

#wrapper {
    margin-left: 50px;
    display: flex; 
    justify-content: center; 
}

#my-element {
    background-color: gray;
    width: 200px; 
    flex: 0 0 auto;
}

    HTML Code:

    <div id="wrapper">
    <div class="pop-out" id="my-element">
        My element.
    </div>
</div>
    Login or Signup to reply.
  2. 0

    To ensure the text doesn’t ‘move’ when scaling so that things stay aligned you could have the whole background color, ‘padding’, border radius and shadow on a before pseudo element which has absolute positioning.

    Also, when doing the scale transform have the origin at top right of the element so the text doesn’t shift (if that is what is required) in terms of its left hand position so things are still aligned with any title.

    I’ve put ‘padding in quotes here because this snippet creates the effect of padding by increasing the pseudo element’s width.

    <style>
  * {
    box-sizing: border-box;
  }
  
  .pop-out {
    transform-origin: top left;
    position: relative;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out, border-radius 0.2s ease-in-out;
    &:hover {
      cursor: pointer;
      transform: scale(1.1);
    }
  }
  
  #wrapper {
    margin-left: 50px;
    display: flex;
    justify-content: center;
  }
  
  #my-element {
    width: 200px;
    flex: 0 0 auto;
    position: relative;
  }
  
  #my-element::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: gray;
    transition: all 0.2s ease-in-out;
    border-radius: 0px;
    box-shadow: 0 0 0px rgba(0, 0, 0, 0.2);
    transform-origin: center center;
    z-index: -1;
    left: 50%;
    transform: translateX(-50%);
  }
  
  #my-element:hover::before {
    width: calc(100% + 2rem);
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
  }
</style>
<div id="wrapper">
  <div class="pop-out" id="my-element">
    My element.
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search