.emby-scrollbuttons-scroller { position: relative } .scrollbuttoncontainer { position: absolute; top: 0; bottom: 0; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; z-index: 1; font-size: 3em; color: #fff; display: none; overflow: hidden } .scrollbuttoncontainer-left { background: rgba(20, 20, 20, .5); background: -webkit-linear-gradient(left, #000 0, rgba(0, 0, 0, 0) 100%); background: -webkit-gradient(linear, left top, right top, from(#000), to(rgba(0, 0, 0, 0))); background: -webkit-linear-gradient(left, #000, rgba(0, 0, 0, 0)); background: -o-linear-gradient(left, #000, rgba(0, 0, 0, 0)); background: linear-gradient(to right, #000, rgba(0, 0, 0, 0)); left: 0 } .scrollbuttoncontainer-right { background: rgba(20, 20, 20, .5); background: -webkit-linear-gradient(right, #000 0, rgba(0, 0, 0, 0) 100%); background: -webkit-gradient(linear, right top, left top, from(#000), to(rgba(0, 0, 0, 0))); background: -webkit-linear-gradient(right, #000, rgba(0, 0, 0, 0)); background: -o-linear-gradient(right, #000, rgba(0, 0, 0, 0)); background: linear-gradient(to left, #000, rgba(0, 0, 0, 0)); right: 0 } .emby-scrollbuttons-scroller:hover .scrollbuttoncontainer { display: -webkit-box; display: -webkit-flex; display: flex } .emby-scrollbuttons-scrollbutton { margin: 0 -.2em; -webkit-transition: -webkit-transform 160ms ease-out; -o-transition: transform 160ms ease-out; transition: transform 160ms ease-out } .scrollbuttoncontainer:hover>.emby-scrollbuttons-scrollbutton { -webkit-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3) } .emby-scrollbuttons-scrollbutton:after { content: ''; display: none !important } .emby-scrollbuttons-scrollbutton:focus { color: inherit !important }