Flickering Text Problem using CSS Padding Hover Transition-CodePudding

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"  /></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

CodePudding user response：

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"  /></a>
    <h3><a href="https://www.google.co.uk/">Design</a></h3>
  </div>
</div>

CodePudding user response：

Try this it might works!

I just make a design label outside a because of padding. (Note: Please do additional change based on your requirement if required with anchor tag.)

This is html code.

<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"  /></a>
<h3><span>Design</span><a href="https://www.google.co.uk/"></a></h3>
</div>

This is css code:

#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 span {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 font-weight: bold;
 text-transform: uppercase;
 letter-spacing: 2px;
 color: #ffffff;
 z-index: 1;
}

#panelLink h3 a {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 font-weight: bold;
 text-transform: uppercase;
 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 {
 text-decoration: none;
}

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