.expandable { transition: all 250ms ease-in-out; } .expandable .expand-bar { position: absolute; display: block; left: 0px; bottom: 0px; background-color: white; width: 100%; cursor: pointer; text-decoration: none; font-weight: 500; box-sizing: border-box; padding-left: 10px; padding-right: 30px; font-size: 12px; text-transform: uppercase; line-height: 20px; } .expandable .expand-bar::before { position: absolute; width: 100%; height: 20px; top: -20px; left: 0px; display: block; content: ""; background: rgba(237,237,237,0); background: -moz-linear-gradient(top, rgba(237,237,237,0) 0%, rgba(255,255,255,0.8) 41%, rgba(255,255,255,1) 70%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(237,237,237,0)), color-stop(41%, rgba(255,255,255,0.8)), color-stop(70%, rgba(255,255,255,1))); background: -webkit-linear-gradient(top, rgba(237,237,237,0) 0%, rgba(255,255,255,0.8) 41%, rgba(255,255,255,1) 70%); background: -o-linear-gradient(top, rgba(237,237,237,0) 0%, rgba(255,255,255,0.8) 41%, rgba(255,255,255,1) 70%); background: -ms-linear-gradient(top, rgba(237,237,237,0) 0%, rgba(255,255,255,0.8) 41%, rgba(255,255,255,1) 70%); background: linear-gradient(to bottom, rgba(237,237,237,0) 0%, rgba(255,255,255,0.8) 41%, rgba(255,255,255,1) 70%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff', GradientType=0 ); } .expandable .expand-bar i { transition: all 250ms ease-in-out; position: absolute; width: 20px; height: 20px; display: block; top: 50%; right: 10px; margin-top: -10px; transform: rotate(-90deg); } .expandable.expanded .expand-bar i { transform: rotate(90deg); } .expandable .expand-bar i::before, .expandable .expand-bar i::after { position: absolute; width: 10px; height: 1px; background: #1d1d1d; content: ""; left: 5px; } .expandable .expand-bar i::before { transform: rotate(45deg); top: 13px; } .expandable .expand-bar i::after { transform: rotate(-45deg); top: 6px; }