Change div that contains icon heignt-CodePudding

I'm trying to create an effect making the arrow icon visible incresing its height progressively on hover, and I'm trying to make a transition but I can't set this div not visible setting the div height to 0,

<div id="down-arrow-div" className="text-center down-arrow" >
     <i className="fas fa-chevron-down"></i>
</div>

the css doesn't work

.down-arrow-div{
   height:0%;
}

I can hide the div with visibility but is a binary value and the effect is not the same

CodePudding user response：

Instead of using visibility, use the opacity property. Set the font height rather than the element height as the snippet below. I've added a border around the parent div so you've got something to aim for with your mouse.

#down-arrow-div {
  width: 5rem;
  height: 5rem;
  border: 1px solid gray;
  display: grid;
  place-items: center;
}

#down-arrow-div>i {
  opacity: 0;
  font-size: 1rem;
  transition: all 0.5s;
}

#down-arrow-div:hover>i {
  opacity: 1;
  font-size: 2rem;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE 4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div id="down-arrow-div" >
  <i ></i>
</div>

CodePudding user response：

In order to hide everything outside of an element, you have to apply overflow: hidden; to it. In this case, to the #down-arow-div. (Mind the mistake, in your example it's ".down-error-div" where it sould be "#down-error-div" (ID-selector instead of class-selector)

CodePudding user response：

As your div is having some content it will have it's children's height even if you set the height to zero. you change the font-size of i tag and it will be fine.