Flickering Text Problem using CSS Padding Hover Transition

Question

I'm not even sure if this is possible!

I'm trying to animate the padding amount around a centered text link. When you click on the text link, the padding is changed from 20% to 100% - this bit works :)

The text is centered using CSS

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

I'm using transition property to animate the padding bit

transition-property: padding;
transition-duration: .5s;
transition-timing-function: ease-in-out;

Apologies if the code is a little clunky - here's the full code I'm using here:

#homePanel {
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

#homePanel img {
  width: 100%;
  filter: grayscale(1%);
  transition-property: opacity;
  transition-duration: .4s;
  transition-timing-function: ease-in-out;
  height: auto;
}

#panelLink h3 a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 2px;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 20%;
  transition-property: padding;
  transition-duration: .5s;
  transition-timing-function: ease-in-out;
}

#panelLink h3 a {
  color: #fff;
  text-decoration: none;
}

#panelLink h3 a:hover {
  color: #fff;
  padding: 100%;
}

<div id="homePanel">
  <div id="panelLink">
    <a href="https://www.google.co.uk/"><img src="https://www.landscapia.co.uk/wp-content/uploads/2022/03/landscapia-design.jpg" alt="Landscapia Design" width="600" height="600" class="img-responsive" /></a>
    <h3><a href="https://www.google.co.uk/">Design</a></h3>
  </div>
</div>

The problem I'm having is the text link is wobbling / flickering when I hover the link. I'm guessing this is because the CSS is trying to also re-center the text to adjust for the extra padding, which is causing the flicker on the hover.

I've also included a link to CodePen showing the code in action - https://codepen.io/rolandxp30/pen/oNqZoom

I can't think of any other way of doing this? - is there a way of stabilising or centering the text or another way of creating the same animation effect?

Thanks in advance, kind regards

Brian

Answer 1

I'd use an absolute positioned pseudo element on the link for the background, and then simply apply a transform: scale(...) on hover.

what is an absolute positioned pseudo element?

A pseudo element, that is absolutely positioned ;-)

Positioning it at top/right/bottom/left 0, makes it take the dimensions of the parent. And on hover, it simply gets scaled up. I used a factor of 3 here, that appears to be sufficient. You don't want to go too high here, otherwise there will be a noticeable delay before you see the it shrink again, when you un-hover the element.

#homePanel {
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

#homePanel img {
  width: 100%;
  filter: grayscale(1%);
  transition-property: opacity;
  transition-duration: .4s;
  transition-timing-function: ease-in-out;
  height: auto;
}

#panelLink h3 a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 2px;
  color: #ffffff;
  padding: 20%;
}

#panelLink h3 a {
  color: #fff;
  text-decoration: none;
}

#panelLink h3 a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.6);
  transition-property: transform;
  transition-duration: .5s;
  transition-timing-function: ease-in-out;
}

#panelLink h3 a:hover::after {
  transform: scale(3);
}

<div id="homePanel">
  <div id="panelLink">
    <a href="https://www.google.co.uk/"><img src="https://www.landscapia.co.uk/wp-content/uploads/2022/03/landscapia-design.jpg" alt="Landscapia Design" width="600" height="600" class="img-responsive" /></a>
    <h3><a href="https://www.google.co.uk/">Design</a></h3>
  </div>
</div>