Question

I have an:

.itembox {

class, where many items in a directory type website are displayed. I think it would be cool to overflow:hidden at a certain height, and have a small 1px solid #AAA under, then when hover over > It displays full. Is this fairly simple using my global class?

Answer 1

It’s pretty much trivial. Add a max-height as well as your overflow:hidden, then on the :hover version of the class remove the max-height (by setting it to a very high number).

.itembox {
    max-height: 200px;
    overflow: hidden;
    border-bottom: 1px solid #aaa;
}
.itembox:hover {
    max-height: 9999px;
}