Ubuntu

­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ /* ------------------------------------------------- Image Box Slider ----------------------------------------------------*/ /* image */ .img-box-slider{ overflow: hidden; position: relative; } .img-box-slider .imgBox-image{ width: 100%; height: 100%; margin: auto; background-repeat: no-repeat; background-size: auto; display: block; } .img-box-slider.md-align-right .imgBox-image{ background-position: right; } .img-box-slider.md-align-left .imgBox-image{ background-position: left; } .img-box-slider.md-align-center .imgBox-image{ background-position: center; } /* hover */ .img-box-slider .image-box-slider-hover{ width: 100%; height: 100%; position: absolute; top: 0; z-index: 9; } .image-box-slider-hover .bg-animate, .image-box-slider-hover .title, .image-box-slider-hover .description{ position: relative; left: -100%; } .image-box-slider-hover .title, .image-box-slider-hover .description{ background-color: transparent !important; } .img-box-slider .bg-animate { width: 100%; height: 100%; position: absolute; top: 0; background-color: rgba(0, 0, 0, 0); } .img-box-slider .image-box-slider-hover .title{ font-size: 20px; font-weight: bold; color: #fff; margin-bottom: 30px; padding: 56px 56px 0 34px; } .img-box-slider .image-box-slider-hover .description{ font-size: 14px; font-weight: 400; color: #fff; padding: 0 56px 0 34px; } /* button */ .img-box-slider .image-box-slider-btn{ background-color: rgba(15, 15, 15, 0.4); width: 35px; height: 35px; position: absolute; bottom: 0; right: 0; color: #fff; backface-visibility: hidden; margin: 0 26px 21px 0; border-radius: 50px; background-position: center; cursor: pointer; z-index: 10; transition: transform .3s, background-color .3s, opacity .2s; } @-moz-document url-prefix() { .img-box-slider .image-box-slider-btn { height: 37px; } } .img-box-slider .image-box-slider-btn:before { display: table-cell; text-align: center; vertical-align: middle; width: 35px; height: 35px; } .img-box-slider .image-box-slider-btn:hover { opacity: 0.7; } .img-box-slider ul, .img-box-slider ul > li { height: 100%; position: relative; } .img-box-slider .image-box-slider-hover-text { position: absolute; top: 50%; padding: 0 50px 0 50px; text-align: center; opacity: 0; font-size: 18px; display: inline-block; width: 100%; line-height: 25px; left: 0; transform: translateY(-50%); } .img-box-slider .imgBox-image-hover { position: absolute; top: 0; left: 0; transition: opacity .3s; }