High transition-CSS examples

In this tutorial I will show you how to apply hover css effects (css transition height).From the height of the transition element 0 to auto when its height is unknown. Here I am going to achieve this (css transition effects) using JavaScript and css.

SCRIPT CODE:

<script type="text/javascript">
    var el = document.querySelector('.el')
    var height = el.scrollHeight;
    el.style.setProperty('--max-height', height + 'px')
</script>

HTML CODE:

<div class="trigger">
    Hover me to see a height transition.
    <div class="el">Your content here</div>
</div>

CSS CODE:

.el {
  transition: max-height 0.5s;
  overflow: hidden;
  max-height: 0;
}
.trigger:hover > .el {
  max-height: var(--max-height);

}

Description

CSS

1. transition: max-height: 0.5s cubic-bezier(...)The specified change is max-heightto use a ease-out-quinttiming function.
2. overflow: hidden Prevents the contents of hidden elements from overflowing their containers.
3. max-height: 0 The specified element does not initially have a height.
4. .target:hover > .el Specifies that when the parent is hovered over, the child is targeted .el and uses --max-heigh tvariables defined by JavaScript.

JavaScript

1. el.scrollHeight Is the height of the element that contains the overflow, which will change dynamically based on the content of the element.
2. el.style.setProperty(...) Sets the element that --max-height specifies the max-height target to hover over, allowing it to smoothly transition from 0 to auto.

Below video explains "css hover transition" -css will change transition from 0 to auto based the text size.