Question 343532 in Html Question posted in
Some basic documentation can be found here.

Html – CSS animate on position change from absolute to relative

I have a div with position: relative, on hover I want to move the div, achieving this with position: absolute with animation, and then I want to go back to its original position with an animation again. I managed to animate when the mouse enters the div, but not when it exits. Can you please help?

Code:

.team-member {
   &.hovered {
      .name-container {
         top: 30%;
         position: absolute;
         transition: top 0.7s ease-in-out;
      }
   }
   .name-container {
      transition: top 0.7s ease-in-out;
      transition: position 0.7s ease-in-out;
      top: 90%; // Just so the animation can be seen
      position: relative;
   }
}
Tags:

3

Answers


  1. 0

    To achieve the effect where a div animates both when the mouse enters and exits, you need to ensure that the CSS transitions are correctly applied to the element in both states (default and hovered). The main issue in your current code is likely due to the attempt to transition the position property, which is not animatable in CSS. Instead, you should focus on animating properties that can interpolate values over time, like top, transform, etc.

    Given your description, it seems you want the .name-container to move when .team-member is hovered and then move back when the hover is removed. Here’s how you can adjust your CSS for the desired effect:

    .team-member {
  position: relative; // Ensure the parent has a defined position

  .name-container {
    position: absolute;
    top: 90%; // Default position
    transition: top 0.7s ease-in-out; // Apply transition to top change
  }

  &:hover .name-container {
    top: 30%; // Position when hovered
  }
}

    In this setup, .name-container will move to top: 30% when .team-member is hovered and will smoothly transition back to top: 90% when the hover state is removed. The transition is applied to the top property of .name-container in both states, ensuring that the movement is animated both ways.

    Remember, CSS transitions work by interpolating values between states, and thus the property you’re transitioning needs to be present in both states. The position property, while crucial for defining how elements are laid out, doesn’t interpolate between its keyword values (like absolute, relative, etc.), so the animation should focus on properties that define the element’s position in a more granular way, like top, left, right, bottom, or the transform property for more complex movements (e.g., transform: translateY(-50%);).

    Login or Signup to reply.
  2. 0

    To achieve the desired effect of animating the movement of the div both on hover and when the mouse leaves, you need to apply the transition properties to both the base state and the hovered state. Here’s how you can modify your CSS:

    .team-member {
    .name-container {
        transition: top 0.7s ease-in-out, position 0.7s ease-in-out;
        top: 90%; // Just so the animation can be seen
        position: relative;
    }

    &:hover {
        .name-container {
            top: 30%;
            position: absolute;
        }
    }
}

    With this modification, the transition properties are applied to .name-container in its base state as well as in its hovered state. This should produce the desired animation effect both when hovering over the div and when the mouse leaves.`

    Login or Signup to reply.
  3. 0

    There are a couple of things that are confusing in your questions, more specifically:

    • why do you have a .hovered class? It seems you are applying a class in some ways (maybe via javascript?), but you don’t really need it, because you can rely on the :hover pseudo-class.
    • why changing the position during an animation? It can make the development more complex, because you potentially change the reference system only for a few seconds. The transition should be sufficient to move the element temporarily!

    That said, perhaps you want to use the :not(:active) pseudo-class to control the animation when the element goes back in position, the following example should help you in achieving what you are looking for:

    .content {
  position: relative;
}

.content:hover {
  position: absolute;
  transition: 0.5s ease-in-out; /* controls the animation when going forward */
  translate: 40px;
}

.content:not(:active) {
  transition: 0.5s ease-in-out; /* controls the animation when going back */
}

/* Visual helpers, just for the demo: */
.content {
  border: 1px solid red;
  width: 100px;
  padding: 1rem;
}
    <html>
  <body>
    <div class="content"> 
      content 
    </div>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search