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

Html – Text are coming first?

When I hover over the experience item, the texts appear instantly, and then the height increases gradually over one second. Why is this happening? I want my text to increase in height in sync with the height increase, without any delay. What can I do about this

.experience-item {
  height: 285px;
  overflow: hidden;
  border-radius: 5px;
  transition: 1s ease-out;
  position: relative;
}

.experience-item .experi-details {
  padding: 20px;
}

.experience-item:hover {
   overflow: visible;
   height: 500px;
   box-shadow: 0 0 100px 0 rgba(0, 0, 0, 0.2);
}
<div class="experience-item">
    <img src="../images/catering.jpg" alt="">
    <h3>Bondhu Ekota Caters</h3>
    <div class="experi-details">
    <p><span>Position:</span> Food Distributor</p>
    </div>
</div>
Tags:

2

Answers


  1. 0

    Change transition: height 1s ease-out; to transition: all 1s ease-out;, otherwise only the height is transitioned, everything else appears instantly.

    Login or Signup to reply.
  2. 0

    Here is the solution to this:-

    .experience-item {
  height: 285px;
  overflow: hidden; /* Set overflow to hidden by default */
  border-radius: 5px;
  transition: height 1s ease-out, overflow 1s ease-out; /* Include overflow in the transition */
  position: relative;
}

    By adding this updated CSS code, both the height and overflow properties will transition over 1s.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search