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
- transition: max-height: 0.5s cubic-bezier(...)The specified change is max-heightto use a ease-out-quinttiming function.
- overflow: hidden Prevents the contents of hidden elements from overflowing their containers.
- max-height: 0 The specified element does not initially have a height.
- .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
- el.scrollHeight Is the height of the element that contains the overflow, which will change dynamically based on the content of the element.
- 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.
Post your comments / questions
Recent Article
- How to check PAN-Aadhaar is Linked or NOT?
- How to customize pagination for django admin?
- How to fix HAXM is not installed |in Android Studio
- How to fix CMOS Checksum Error in Computer or Laptop | SOLVED
- Reactivating windows after a Hardware change on PC or Laptop
- FIXED: Windows reported that the hardware of your device has changed. Error code :0xc004F211
- "redirect" is not defined pylance("reportUndefinedVariable)
- This action cannot be completed because the file is open in SQL Server(SQLEXPRESS) - FIXED
Related Article