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);
}
Below video explains "css hover transition" -css will change transition from 0 to auto based the text size.