Making a smooth transition for moving text

Question

Below is a simplified version of a restaurant menu i've created. When you hover over the dish, a description of the dish shows up, and i created a transition to make it smoother.

The next dish, the menu item below, gets pushed down when the description of the upper menu item is shown. I would like to create a transition so that the text below moves further down on the page more smoothly instead of it changing from one place to another instantly, since that looks rather glitchy on the page (if that makes any sense).

I would also like to make the opacity transition work both ways - right now, works when i hover over the item, but when i take the mouse off it, it goes away instantly, so the transition doesn't work both ways at the moment. i've tried using the not hover function with no luck.

Here's my code:

Fiddle demo

HTML:

<html>
<body>
<h4 class="navn"> Pizza </h4>
<div class="beskrivelse">
<p> ingredients: cheese, ham, pepperoni </p>
</div>

<h4 class="navn"> Hamburger </h4>
<div class="beskrivelse">
<p> Comes with salad and fries  </p>
</div>
</body>
</html>

CSS:

h4:hover + .beskrivelse {
  opacity: 1;
  height: auto;
}

h4:hover {
  color: red;
}

.beskrivelse {
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 3s ease-out;
}

I've updated the fiddle to include all CSS and enough markup to show the action. — isherwood, Oct 31 '18 at 20:02
you asked the same question yesterday(https://stackoverflow.com/questions/53067736/html-css-transistion-not-working-properly) and it was closed as duplicate, you should consider reading the duplicate because it solves your problem .. repeating the question will simply make it closed again unless you explain that the duplicate wasn't helpful and why — Temani Afif, Oct 31 '18 at 23:02
Yeah, i know. I tried to respond to the comments, but for some reason i could't post my comments when i wrote it. I should have checked further down on the question you linked to. The first couple of answers were somewhat different than what i was trying to do, but further down i see that there are some answers that have what i'm looking for. — Hank Moody, Nov 01 '18 at 13:03

score 1 · Answer 1 · answered Oct 31 '18 at 20:07

.beskrivelse {
  max-height: 0; /* <-- max-height since we don't know the actual height */
  ...
  transition: all 3s ease-out; /* <-- transition all properties */
}

h4:hover+.beskrivelse {
  ...
  max-height: 100px; /* <-- a safely large value */
}

Demo

Bryce Howitson · Answer 2 · 2018-10-31T20:38:11.330

Well, it looks jumpy because CSS values can only be transitioned to and from fixed unit values. height:0 and height:auto don't have units and therefore can't display a transition.

There are multiple workarounds, each with their own drawbacks. Here's a bunch more detail about the available options. Switching to max-height as isherwood said is one of the more accepted options.

That said, there are other ways you could solve it without trying to animate height.

h4 {
  padding:0;
  margin:0;
}

.beskrivelse {
  /* give container position to keep child in place */
  position: relative;
  margin:0;
  padding:0;
}
.beskrivelse p {
    /* take the element out of the flow */
    position: absolute;
    top: 0;
    left:100px;
    z-index: 10;
    /* move it away and hide it */
    transform: translateY(200%);
    opacity:0;
    
    /*setup animation */
    transition: all 0.25s ease-in-out;
   
   /* make it look nice */
   margin:0;
   padding: 10px;
   border-radius: 8px;
   border: 1px solid #6DABE4
   background: #ffff;
   box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
}

h4:hover + .beskrivelse p {
  transform: translateY(0);
  opacity:1;
}

<h4 class="navn"> Pizza </h4>
<div class="beskrivelse">
<p> ingredients: cheese, ham, pepperoni </p>
</div>

<h4 class="navn"> Hamburger </h4>
<div class="beskrivelse">
<p> Comes with salad and fries  </p>
</div>

Making a smooth transition for moving text

2 Answers2