Hidden text animation is not working properly

Question

I want to make a similar page as this one: https://lp.anzi.kr/?page=listeners. When you hover over a button, it moves up and some text will show with a background.

I try to make this with the following code: https://jsfiddle.net/rcv8b0kh/3/

$button = document.querySelector('button');
$textcontent = document.querySelector('.textcontent');

if ($button.hover) {
  $textcontent.classList.add('active')
}

button {
  background-color: red;
  border-radius: 50%;
  width: 10rem;
  height: 10rem;
}

button:hover {
  box-shadow: 0px 4rem 6rem -2rem rgba(0, 0, 0, 0.57);
  -moz-box-shadow: 0px 2px 40px -10px rgba(0, 0, 0, 0.57);
  transform: translateY(-3.5rem);
  transition: all .3s ease 0s;
  border: none;
}

.textcontent {
  visibility: hidden;
}

.active {
  visibility: 1;
  transform: translateY(-3.5rem);
  transition: all .3s ease 0s background-color: black;
  color: white
}

<div>
  <button>
</button>
  <div class="textcontent">
    <p>some text</p>
  </div>
</div>

I also see people using ::before and ::after for these kind of animations but I don't really know how to implement them here.

score 1 · Answer 1 · answered May 31 '19 at 13:20

Here's a solution with pure CSS and :after pseudo element:

div {
  position: relative;
  width: 10em;
}
p {
  text-align: center;
  transform: translateY(4rem);
}
p:after {
  content: "";
  display: block;
  background-color: red;
  border-radius: 50%;
  width: 10rem;
  height: 10rem;
  transition: all .3s ease 0s;
  transform: translateY(-5rem);
}
div:hover p:after {
  transform: translateY(-12rem);
}

<div>
  <p>some text</p>
</div>

score 1 · Answer 2 · answered May 31 '19 at 13:26

You seem to be getting confused between javascript and jquery. However, I don't think ($button.hover) would be a valid condition in either.

button = document.querySelector('button');
textcontent = document.querySelector('.textcontent');
button.addEventListener('mouseover', handlerIn)
button.addEventListener('mouseout', handlerOut)

function handlerIn() {
  textcontent.classList.add('active')
}

function handlerOut() {
  textcontent.classList.remove('active')
}

button {
  background-color: red;
  border-radius: 50%;
  width: 10rem;
  height: 10rem;
}

button:hover {
  box-shadow: 0px 4rem 6rem -2rem rgba(0, 0, 0, 0.57);
  -moz-box-shadow: 0px 2px 40px -10px rgba(0, 0, 0, 0.57);
  transform: translateY(-3.5rem);
  transition: all .3s ease 0s;
  border: none;
}

.textcontent {
  opacity: 0;
  transition: opacity  0.2s linear;
}

.active {
  opacity: 1;
}

<div>
  <button>
</button>
  <div class="textcontent">
    <p>some text</p>
  </div>
</div>

score 1 · Answer 3 · answered May 31 '19 at 13:52

you don't need js to do that its a simple css method

<div>
  <button class="hoverbtn" id="hoverbtn">
  </button>
  <div id="textcontent" class = "textcontent">
    <span>some text</span>
  </div>
</div>

and here is css to hide and show text

If the second item is directly inside the container:

#hoverbtn:hover > #textcontent { opacity : 1 }

If the second item is next to (after containers closing tag) the container:

#hoverbtn:hover + #textcontent { opacity : 1 }

If the second item is somewhere inside the container:

#hoverbtn:hover #textcontent { opacity : 1 }

If the second item is a sibling of the container:

#hoverbtn:hover ~ #textcontent { opacity : 1 }

so here is your css :

.hoverbtn {
  background-color: red;
  border-radius: 50%;
  width: 10rem;
  height: 10rem;
}

.hoverbtn:hover {
  box-shadow: 0px 4rem 6rem -2rem rgba(0, 0, 0, 0.57);
  -moz-box-shadow: 0px 2px 40px -10px rgba(0, 0, 0, 0.57);
  transform: translateY(-3.5rem);
  transition: all 0.3s ease 0s;
  border: none;
}

.textcontent {
  opacity: 0;
}

.hoverbtn:hover+.textcontent {
  opacity: 1;
}

reference : https://stackoverflow.com/a/4502693/6550949

score 0 · Accepted Answer · answered May 31 '19 at 13:30

You really shouldn't need Javascript to do this.

I'm not really sure what you're looking for, but I'd use a width / opacity transition on the .textContent (when button is hovered) and it achieves very similar results to the page you have linked.

button {
  background-color: red;
  border-radius: 50%;
  border: none;
  width: 10rem;
  height: 10rem;
  transition: all .3s ease 0s; 
}

button:hover {
  box-shadow: 0px 3rem 4rem -2rem rgba(0, 0, 0, 0.57);
  -moz-box-shadow: 0px 3rem 4rem -2rem rgba(0, 0, 0, 0.57);
  transform: translateY(-3.5rem);
  transition: all .3s ease 0s;
  border: none;
}

.textcontent p{
  width:0px;
  opacity:0;
  transition: opacity .3s ease 0s; 
}

button:hover + .textcontent p{
  width:200px;
  opacity:1;
  transition: all .3s ease 0s; 
}

<div>
  <button>
</button>
  <div class="textcontent">
    <p>some text</p>
  </div>
</div>

Hidden text animation is not working properly

4 Answers4