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
- Your system's memory configuration has changed since it entered hibernation.
- Save image to client browser using jQuery?
- Get filename of image jQuery?
- How to get the image src using JavaScript?
- System.Net.Http.Formatting, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' which has a higher version than referenced assembly 'System.Net.Http.Formatting' with identity 'System.Net.Http.Formatting, Version=4.0.0.0
- Cordova Android build error "Cannot read property 'length' of undefined". An error occurred while running subprocess cordova.
- ERROR in The Angular Compiler requires TypeScript >=3.9.2 and <4.0.0 but 3.8.3 was found instead
- Code ENOLOCAL Could not install from "android" as it does not contain a package.json file.
Related Article