AtoZ CSS Quick Tip: Using Hover and Height
Welcome to our AtoZ CSS series! In this series, I’ll be exploring different CSS values (and properties) beginning with a letter of the alphabet. We know that sometimes screencasts are just not enough, in this article we’ve added a new quick tip about Hover for you.
H is for Hover and Height
There’s not too much more I can say about Hover that I haven’t already covered in the video about the letter H. However, there are some cool animations that you can apply for a hover state. Google “CSS hover effects” and you’ll find plenty.
Here are a couple of sites that have some nifty effects:
- Codrops: CSS transition hover effects
- Design Shack: Copy + Paste hover effects
- CSS-Tricks: pop hovers
Another CSS H (that I haven’t gone into much detail about on this site) is
The height property is used to define the content height on a containing element. All the standard length units (like px, em, rem, %, vw, vh and others) can be used to control
If the height of an element is not specifically set, it’s calculated as the minimum height to hold all the containing elements (corresponding to the default value
It’s generally advisable to avoid explicitly setting a height on any elements as it restricts the flexibility of the element – meaning it can’t grow as the content changes. This is particularly risky when working on a responsive design when content needs to reflow vertically as the available width changes.
As such, I tend to only set
height on elements that have predefined dimensions – like images. Another use case is when using
fixed position as
width) shrink wrap around positioned elements.
Here’s an example that demonstrates the problem with setting a fixed height.
While the first set of text looks styled correctly, as soon as the text is shorter or longer than the styling no longer looks correct – the containing box appears too big, or the text flows outside the box.
A solution to the overflowing text could be to use the overflow property, but this cuts off the text and makes it unreadable.
This situation could be completely avoided by not specifying the height in the first place. If I can improve the flexibility of my code without doing anything at all, that gets my vote!