How to stop the movement of box on hover?

Question

I have a box in where there is a READ MORE text. Here is the fiddle for it. On hover, the box is moving towards the right. I am wondering what is the reason behind this ? How can I stop its movement ?

Below is my css code:

.chrisdavenport-middle24-text{
   position: absolute;
    top: 290px;
    /* font-style: italic; */
    font-family: "Adelle PE";
    padding-right: 200px;
    /* font-size: 16px; */
    padding-left: 200px;
    border-style: solid;
    padding-top: 10px;
    padding-bottom: 10px;
   color: orange;
    line-height: 1.379;
    font-size: 16px;
    font-family: "Adelle PE";
   color: red;
    right: 35px;
    letter-spacing: 0.300em;
}

.chrisdavenport-middle24-text:hover {
    font-weight: bold;
    font-style: italic; 
}

@AkhilTrivedi That's the only CSS I have and you can check my jsfiddle example. — , Jun 11 '17 at 17:30

Evan Sims · Answer 1 · 2017-06-11T18:13:26.843

The box isn't actually moving, it's just getting wider because you're changing the weight and style of the font. To resolve this bug you just need to either assign your paragraph tag a "width" property, or imply that width by giving it a "left" property, to compliment the "right" counterpart you're already using above. Doing this will constrain it's width and stop the box from changing size.

.chrisdavenport-middle24-text{
  position: absolute;
  top: 290px;
  left: 0;
  right: 0;

  padding: 10px 200px;

  font-family: "Adelle PE";
  line-height: 1.379;
  font-size: 16px;
  letter-spacing: 0.300em;
  text-align: center;

  border-style: solid;
  color: red;
}

.chrisdavenport-middle24-text:hover {
  font-weight: bold;
  font-style: italic;
}

https://jsfiddle.net/csybh5ze/3/

Johannes · Accepted Answer · 2017-06-11T20:09:07.573

The box isn't moving, it's just getting a little bit wider (right aligned, so the left border goes to the left a little bit). That's due to the bold and italic font taking a little more horizontal space than the regular font.

To avoid this, you can use a fixed width on the box: Erase the padding-right and padding-leftand give it text-align: center and an appropriate width setting.

Here's the according fiddle: https://jsfiddle.net/ghwzzyjy/1/

score 0 · Answer 3 · answered Jan 20 '22 at 05:06

0

Well you may use text-indent: 12px in your code.

answered Jan 20 '22 at 05:06

Ibrahim Hossain

51
6

How to stop the movement of box on hover?

3 Answers3