CODEWITHSUNDEEP
htmlcsshover
mino
mino

Reputation: 23

Text appears non-centered on hover

I am trying to make the about section of my website appear in a different language when hovering. The code to make the translation appear when hovering over it works, however it makes the translated text appear below the original one (instead of at the same position) Can someone help me fix this? Cheers xx

This is the Code:

.aboutger {
  opacity: 0;
}

.textabout {
  text-align: center;
  font-size: 25px;
  position: relative;
  top: 140px;
  width: 1500px;
  font-family: "Druk Wide Web Medium Regular";
  color: floralwhite;
  -webkit-text-stroke: 1px black;
}

.abouteng,
.aboutger {
  transition: opacity 1s;
}

.textabout:hover .abouteng {
  opacity: 0;
}

.textabout:hover .aboutger {
  opacity: 1;
}
<div class="textabout">
  <p><span class="abouteng">Luca is one of the most promising talents rising from a new generation of Berlin-bred artists. 
<br> <br> Being classically trained since his early childhood, he started writing and producing electronic pop music at the age of 11, later transitioning into techno in 2017.</span></p>

    <p><span class="aboutger">Luca zaehlt zu den vielversprechendsten aufstrebenden Talenten der Berliner Technoszene. 
<br> <br>
Nachdem er als Kind klassisch Kontrabass und Klavier lernte, begann er sich im Alter von 11 Jahren sich mit der Produktion elektronischer Popmusik auseinander zu setzen, bis er 2017 zu Techno ueberging. </span></p>
</div>

Upvotes: 0

Views: 32

Answers (1)

Zam Abdul Vahid
Zam Abdul Vahid

Reputation: 2721

Opacity will only work on the visibility of an element on not on its positioning. Either display: none or absolute positioning would be required to make the text appear in the same positions.

.aboutger {
  display: none;
}

.textabout {
  text-align: center;
  font-size: 25px;
  position: relative;
  top: 140px;
  width: 1500px;
  font-family: "Druk Wide Web Medium Regular";
  color: floralwhite;
  -webkit-text-stroke: 1px black;
}

.abouteng,
.aboutger {
  transition: opacity 1s;
}

.textabout:hover .abouteng {
  display: none;
  transition: opacity 2s;
}

.textabout:hover .aboutger {
  display: block;
  transition: opacity 2s;
}
<div class="textabout">
  <p><span class="abouteng">Luca is one of the most promising talents rising from a new generation of Berlin-bred artists. 
<br> <br> Being classically trained since his early childhood, he started writing and producing electronic pop music at the age of 11, later transitioning into techno in 2017.</span></p>

    <p><span class="aboutger">Luca zaehlt zu den vielversprechendsten aufstrebenden Talenten der Berliner Technoszene. 
<br> <br>
Nachdem er als Kind klassisch Kontrabass und Klavier lernte, begann er sich im Alter von 11 Jahren sich mit der Produktion elektronischer Popmusik auseinander zu setzen, bis er 2017 zu Techno ueberging. </span></p>
</div>

Upvotes: 2

Related Questions