Display other div on button hover with transition-CodePudding

I'm really struggling to make my head around transitions. I've got a round button and I would like the div to show when the button is hovered. But I would like to have and "(un)fold" effect. Could you help me to add the animation to this css?

var btn = document.getElementById("open_feedback_form");
var x = document.getElementById("title");

btn.addEventListener("click", function()  {
  if (x.style.visibility === 'hidden') {
    x.style.visibility = 'visible';
  } else {
    x.style.visibility = 'hidden';
  }
});

.help_button {
    position: fixed;
    bottom: 10rem;
    right: 10rem;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    border: none;
    box-shadow: 0 0 0 10px rgba(243, 147, 37, 0.4);
    background-color: #F39325;
    font-style: normal;
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 150%;
    color: #ffffff;
}
.feedback-title {
    position: fixed;
    bottom: 10rem;
    right: 12.5rem;
    height: 5rem;
    background-color: #F39325;
    color: #ffffff;
    font-size: 1.6rem;
    line-height: 5rem;
    padding-right:2.5rem;
    padding-left:1rem;
    visibility: hidden;
}

<div  id="title">Feedback form</div>
<button  aria-label="help and feedback form" id="open_feedback_form">
    ?
</button>

I'm not even sure whether my approach here is correct.

CodePudding user response：

Best practice for an unfold effect should be using the transform 3d properties. Wrap the feedback form in a container and transform the inner element from 100% from the x-as to 0%.

CodePudding user response：

Here is how could do it only with CSS and HTML :

body{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}
.help_button {
    display:block;
    box-sizing:border-box;
    position: relative;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    border: none;
    box-shadow: 0 0 0 10px rgba(243, 147, 37, 0.4);
    background-color: #F39325;
    font-style: normal;
    font-weight: 600;
    font-size: 1.6rem;
    color: #ffffff;
   
}
.feedback-title {
    position: absolute;
    right:2.3rem;
    top:0;
    height: 100%
    transform:translate(-5px, -5px);
    background-color: #F39325;
    color: #ffffff;
    font-size: 1.6rem;
    line-height: 5rem;
    padding-right:2.5rem;
    padding-left:1rem;
    z-index:-1;
    opacity:0;
    transition : .5s ease;
    width:12rem;
   
}

.help_button:hover .feedback-title {
   opacity:1;
   
}

<button  aria-label="help and feedback form" id="open_feedback_form">
  ?
  <span id="title" >Feedback from</span>
</button>