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

Html – Content jumping on hover

body {
  background-color: #666e8e;
  margin: 3rem;
}

#testlink {
  text-decoration: none;
}

#testlink:hover .titles {
  color: #3c2301;
  background: linear-gradient(#7bcfd7 25%, #D2B48C 75%);
}

.test {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: auto;
  height: 150px;
  background: linear-gradient(#e97e7e 25%, #3bcee5 75%);
  border-radius: 0% 0% 0% 0% / 0% 0% 0% 0%;
  color: white;
  box-shadow: 20px 20px rgba(0, 0, 0, .15);
  transition: all .8s ease;
  margin: 15px;
}

.test1:hover .description {
  display: block;
  pointer-events: auto;
}

.test:hover {
  border-radius: 0% 0% 90% 90% / 0% 0% 45% 45%;
  box-shadow: 10px 10px rgba(0, 0, 0, .25);
  width: auto;
  height: 450px;
  display: flex;
  justify-content: center;
  align-items: normal;
}

.description {
  display: none;
  position: relative;
  bottom: 400px;
  left: 0;
  width: 90%;
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  text-align: center;
  pointer-events: none;
}
<div class="test1">
  <a href="https://youtube.com" id="testlink" target="_blank">
    <h1 class="test">Testing Box</h1>
  </a>
  <p class="description">Test description</p>
</div>

here is the issue

I was trying to get it to just display the text but it keeps doing that reset thing.
I have tried changing the positions to absolute and just taking the description out of the div and utilizing its own css code but everything I have tried has not worked

Tags:

2

Answers


  1. 0

    The twitching effect occurs when hovering over the element due to layout shifts caused by transitions in width and height properties and pointer-events on the description text. Adjust the transition property to exclude changes in width and height. Specify only the necessary properties such as color, border-radius, and box-shadow to transition smoothly and set pointer-events:none on the ‘.description’. This ensures that layout shifts are avoided during the hover effect, preventing the twitching behavior.
    Try on codepen: https://codepen.io/beth-codes/pen/MWRbzbb?editors=1100

         .test1:hover .description {
        display: block;
        pointer-events: none;
     }
    Login or Signup to reply.
  2. 0

    Okay, so you’ve got this code for your website’s layout, but you’ve noticed that when you hover over something, the content jumps around, which doesn’t look great. We’ll fix that.

    In the code you provided, there’s a part that controls how some content appears when you hover over it. Specifically, there’s a section marked with .description. Right now, it’s set up in a way that can cause the content to jump when it appears.

    To make it smoother, we need to adjust how it’s positioned. We’ll change it to appear exactly where we want it without messing up the rest of the layout.

    Here’s what we’ll do:

    Instead of making it move to a specific distance from the bottom, we’ll set it to be at the very bottom.
    We’ll also center it horizontally, so it looks nice and neat.
    And to ensure it stays centered even when the window size changes, we’ll use a little trick called transform.
    With these changes, the content will smoothly appear on hover, giving your website a more polished feel.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search