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
- 'ionic' is not recognized as an internal or external command
- OSError: cannot open resource - Python
- Python read file line count
- How to Encode & Decode using Base64 in Python?
- Unspecified error-The function is not implemented. Rebuild the library with Windows, GTK+ 2.x or Cocoa support.
- How to generate a Captcha verification code image with Python?
- How to show an image using path python PIL?
- How to remove Background from the images using Python?
Related Article