Question 30678 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Position Animated Text to the Bottom Left of Div – WordPress

could someone please help me position this animated text to the bottom left corner of my div? If I need to change the way I implement the animated text I am all ears. I got the example I’m using from another Stack Overflow thread. I’m using WordPress & Elementor.

The link to my website is:
http://stalone.flywheelsites.com/

The current code I am using is the following:

.lyrics-container {
    margin: 75% 0% 0% 0%;
}
.lyrics{
  position: absolute;
  font-size: 72px;
  font-weight: bold;
  line-height: 87%;
}
.lyrics:nth-child(1){
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate-reverse;  
}


.lyrics:nth-child(2){
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate;
}

@keyframes fade{
    0%,50% {
      opacity: 0;
}
    100%{
      opacity: 1;
  }
}
  <div class="logo">Logo</div>
  <div class="lyrics-container">
  <p class="lyrics">I'm trying,<br>not to swim<br>into the deep,</p>
  <p class="lyrics">I will never<br>love again.</p>
  </div>

Note: I did a quick margin hack for demonstration purposes, I know this isn’t feasible and that is why I am here looking for help.

Thanks in advance!

Tags:

2

Answers


  1. 0

    You need to have a relative wrapper for the absolute positioned element. This is a common way of doing it. You may need to give the wrapper a certain height. For example 100vh or whatever you neeed.

    I just added the bare minimum. So you will have to handle the rest of the styles.

    .wrapper {
  position: relative;
 }

.lyrics-container {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 75% 0% 0% 0%;
}
.lyrics{
  position: absolute;
  font-size: 72px;
  font-weight: bold;
  line-height: 87%;
}
.lyrics:nth-child(1){
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate-reverse;  
}


.lyrics:nth-child(2){
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate;
}

@keyframes fade{
    0%,50% {
      opacity: 0;
}
    100%{
      opacity: 1;
  }
}
      <div class="wrapper" >
     <div class="logo">Logo</div>
     <div class="lyrics-container">
        <p class="lyrics">I'm trying,<br>not to swim<br>into the deep,</p>
        <p class="lyrics">I will never<br>love again.</p>
     </div>
  </div>
    Login or Signup to reply.
  2. 0

    You can use position: absolute; to align it to the bottom without affecting the rest of your components. More on positions here.

    .lyrics-container {
  width: 100%;
  position: absolute;
  bottom: 0;
}

.lyrics {
  position: absolute;
  font-size: 72px;
  font-weight: bold;
  line-height: 87%;
}

.lyrics:nth-child(1) {
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate-reverse;
}

.lyrics:nth-child(2) {
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate;
}

@keyframes fade {
  0%,
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
    <div class="logo">Logo</div>
<div class="lyrics-container">
  <p class="lyrics">I'm trying,<br>not to swim<br>into the deep,</p>
  <p class="lyrics">I will never<br>love again.</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search