Note: I am not simply asking how to put a gradient to the bottom of a div. I'm asking how to only show the gradient if the div is greater than a certain height.
I currently have this:
https://jsfiddle.net/fwtj44bj/3/
I want to apply this gradient to the bottom of any .container
that is great than 100px in height:
http://www.colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100
Meaning that the second row of the first .container
should have the gradient over the boxes, but the second .container
should have no gradient.
How can this be done?
My thinking is to somehow make use of max-height
, but I'm not sure how.
HTML:
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
CSS:
.container {
width: 332px;
margin-bottom: 48px;
}
.box {
width: 100px;
height: 100px;
display: inline-block;
background: red;
margin-right: 8px;
}