How to create an animated line that works with overflow:hidden?

user_13002687 0
Viewed 66

I have weird issue when I add overflow:hidden to h3 element.

I am trying to hover h3 element and see green low line add from right and it work but if I use overflow on h3 element it invisible for no reason (just delete the comment)

How can I fix it?

.center {
    width: 50%;
    height: 70%;
    margin: 10% auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.center>h3 {
    padding: 15px 20px 2px 20px;
    position: relative;
    z-index: 1;
    border-bottom: 3px solid rgb(80, 90, 81);
    box-sizing: content-box;
/*     overflow: hidden; */
}

.center>h3::before {
    content: "";
    box-sizing: content-box;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 3px solid rgb(52, 219, 68);
    height: 100%;
    width: 100%;
    z-index: -1;
    transform: translateX(100%);
    transition-duration: .9s;
}

.center>h3:hover:before {
    transform: translateX(0);
}
    <div class="center">
        <h3>hi hi hi</h3>
        <h3>hi hi hi</h3>
        <h3>hi hi hi</h3>
        <h3>hi hi hi</h3>
    </div>

css-transitions css html
1 Answers

Another idea with only background

.center {
  width: 50%;
  height: 70%;
  margin: 10% auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.center>h3 {
  padding: 15px 20px 5px 20px;
  overflow: hidden;
  background: 
    linear-gradient(rgb(52, 219, 68) 0 0) bottom right/0%   3px,
    linear-gradient(rgb(80, 90, 81)  0 0) bottom      /100% 3px;
  background-repeat:no-repeat;
  transition-duration: .9s;
}

.center>h3:hover {
  background-size: 100% 3px;
}
<div class="center">
  <h3>hi hi hi</h3>
  <h3>hi hi hi</h3>
  <h3>hi hi hi</h3>
  <h3>hi hi hi</h3>
</div>

Using pseudo element you can do like below:

.center {
  width: 50%;
  height: 70%;
  margin: 10% auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.center>h3 {
  padding: 15px 20px 5px 20px;
  box-shadow:0 -3px 0 inset rgb(80, 90, 81) ;
  overflow: hidden;
  position:relative;
}

.center>h3::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  transform-origin:right;
  transform:scaleX(0);
  transition:0.9s;
  background:rgb(52, 219, 68);
}
.center>h3:hover::before {
  transform:scaleX(1);
}
<div class="center">
  <h3>hi hi hi</h3>
  <h3>hi hi hi</h3>
  <h3>hi hi hi</h3>
  <h3>hi hi hi</h3>
</div>

user_86203330
Related