Flickering Text Problem using CSS Padding Hover Transition - css

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">
<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" />
<h3>Design</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">
<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" />
<h3>Design</h3>
</div>
</div>

Answer 2

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" class="img-responsive" /></a>
<h3><span>Design</span></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%;
}