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

Html – Is there a way to animate/translate this div from bottom: 0 to top: 0 easily?

I’m trying to get the below code to transition smoothly from bottom: 0 to top: 0. I understand that transitions only work with the same attribute, but I’m at a loss on how to do it smoothly right now. Here’s the code in question:

.portCard * {
  max-width: 100%;
  transition: .35s .35s transform cubic-bezier(.1,.72,.4,.97);
}

.portCard {
  position: relative;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  max-width: 250px;
}

.portCardContent {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0px);
  width: 100%;
  text-align: center;
  background-color: #86B971;
  z-index: 1;
  bottom: 0;
  height: auto;
}

.portCard:hover .portCardContent {
  top: 0;
  bottom: auto;
}

.portCardTitle {
  font-size: 1.2em;
  font-weight: 700;
}

.portCardText {
  font-size: .8em;
}

.portCardLink {
  display: none;
}
                <div class="portCard">
                    <img src="https://images.unsplash.com/photo-1586511925558-a4c6376fe65f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=60" alt="">
                    <div class="portCardContent">
                        <h3 class="portCardTitle">
                        Make your <span>choice</span> right now!
                        </h3>
                        <p class="portCardText">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia quisquam doloremque nostrum laboriosam, blanditiis libero corporis nulla a aut?</p>
                        <a href="#" class="portCardLink">
                            <span>Learn How</span>
                        </a>
                    </div>
                </div>
Tags:

2

Answers


  1. 0

    Your transform will not applicaple for the top property since you mentioned the transform in transition and also you used some unnecessary properties like bottom

    Here is the resolved code (only need to change css):

    .portCard * {
    max-width: 100%;
    transition: top 0.35s cubic-bezier(0.1, 0.72, 0.4, 0.97);
}

.portCard {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-width: 250px;
}

.portCardContent {
    position: absolute;
    top: 242px;
    width: 100%;
    text-align: center;
    background-color: #86b971;
    z-index: 1;
}

.portCard:hover .portCardContent {
    top: 0;
}

.portCardTitle {
    font-size: 1.2em;
    font-weight: 700;
}

.portCardText {
    font-size: 0.8em;
}

.portCardLink {
    display: none;
}
    Login or Signup to reply.
  2. 0

    Combine top (or bottom) with translate. In your case, use bottom: 100% which will make your item out of the container but you rectify this using translatey(100%)

    .portCard * {
  max-width: 100%;
}

.portCard {
  position: relative;
  overflow: hidden;
  max-width: 250px;
}
.portCard img {
  display: block;
}

.portCardContent {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  background-color: #86B971;
  z-index: 1;
  bottom: 0;
  transition: .5s;
}

.portCard:hover .portCardContent {
  translate: 0 100%;
  bottom: 100%;
}

.portCardTitle {
  font-size: 1.2em;
  font-weight: 700;
}

.portCardText {
  font-size: .8em;
}

.portCardLink {
  display: none;
}
    <div class="portCard">
  <img src="https://images.unsplash.com/photo-1586511925558-a4c6376fe65f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=60" alt="">
  <div class="portCardContent">
    <h3 class="portCardTitle">
      Make your <span>choice</span> right now!
    </h3>
    <p class="portCardText">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia quisquam doloremque nostrum laboriosam, blanditiis libero corporis nulla a aut?</p>
    <a href="#" class="portCardLink">
      <span>Learn How</span>
    </a>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search