CSS-Only Height Transition

Hover
CSS
Last Updated: Nov 10, 2025
  • Code sets element back to auto height on devices that don't support pointer.
<style>
@media (hover: hover) {
	.hover-1_mask { grid-template-rows: 0fr; transition: grid-template-rows 200ms; }
	.hover-1_wrap:is(:hover, :focus-within) .hover-1_mask { grid-template-rows: 1fr; }
}
</style>