Ubuntu

­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ /* ------------------------------------------------- Image Box Fancy ----------------------------------------------------*/ /* image */ .img-box-fancy{ overflow: hidden; position: relative; } .img-box-fancy.md-align-left .imgBox-image{ background-position: left; } .img-box-fancy.md-align-center .imgBox-image{ background-position: center; } .img-box-fancy.md-align-right .imgBox-image{ background-position: right; } .img-box-fancy .imgBox-image{ width: 100%; height: 100%; margin: auto; background-repeat: no-repeat; background-size: auto; display: block; } /* 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-fancy .image-box-fancy-btn { height: 37px; } } .img-box-fancy .image-box-fancy-btn:before { display: table-cell; text-align: center; vertical-align: middle; width: 35px; height: 35px; } .img-box-fancy .image-box-fancy-btn:hover { opacity: 0.7; } .img-box-fancy ul, .img-box-fancy ul > li { height: 100%; position: relative; } .img-box-fancy .image-box-fancy-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-fancy .imgBox-image-hover { position: absolute; top: 0; left: 0; transition: opacity .3s; } .img-box-fancy .image-box-fancy-desc{ position: absolute; z-index: 9; padding:45px 60px; transition: all .7s; } .col-sm-3 .img-box-fancy .image-box-fancy-desc.image-box-fancy-desc-full, .col-sm-2 .img-box-fancy .image-box-fancy-desc.image-box-fancy-desc-full, .col-sm-1 .img-box-fancy .image-box-fancy-desc.image-box-fancy-desc-full{ padding:45px 15px; } .img-box-fancy .image-box-fancy-desc.image-box-fancy-desc-full { text-align: center; } .col-sm-3 .img-box-fancy .image-box-fancy-desc.image-box-fancy-desc-full .image-box-fancy-container, .col-sm-2 .img-box-fancy .image-box-fancy-desc.image-box-fancy-desc-full .image-box-fancy-container, .col-sm-1 .img-box-fancy .image-box-fancy-desc.image-box-fancy-desc-full .image-box-fancy-container{ max-width: 75%; } .img-box-fancy .image-box-fancy-desc.image-box-fancy-desc-full .image-box-fancy-container{ position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; max-width:50%; } .img-box-fancy .image-box-fancy-container{ position: absolute; top: 50%; transform: translateY(-50%); width: calc(100% - 120px); max-height: 100%; overflow: hidden; } .img-box-fancy .image-box-fancy-desc.image-box-fancy-desc-normal{ width: 60%; height: 60%; bottom: calc(-60% + 70px); left: calc(-60% + 70px); } .img-box-fancy .image-box-fancy-desc.image-box-fancy-desc-full{ width: 100%; height: 100%; bottom: calc(-100% + 70px); left: calc(-100% + 70px); } .img-box-fancy .image-box-fancy-desc.image-box-fancy-open{ bottom: 0!important; left:0!important; } .img-box-fancy .image-box-fancy-collapse{ position: absolute; right: 0; font-size: 23px; top: 0; padding-top: 26px; padding-right: 22px; cursor:pointer; width: 70px; height:70px; } .img-box-fancy .image-box-fancy-collapse i{ transform: rotate(90deg); display: block; float: right; } .img-box-fancy .image-box-fancy-icon{ font-size:40px; } .img-box-fancy .image-box-fancy-title{ font-size: 20px; font-weight: bold; line-height: 1.2em; margin:15px 0 15px; } .img-box-fancy p{ line-height: 1.7em; } .img-box-fancy .image-box-fancy-desc .image-box-fancy-title, .img-box-fancy .image-box-fancy-desc p, .img-box-fancy .image-box-fancy-desc .image-box-fancy-icon{ opacity:0; transform: translateX(-50px); transition: opacity .2s, transform .4s; } .img-box-fancy .image-box-fancy-desc.image-box-fancy-open .image-box-fancy-title, .img-box-fancy .image-box-fancy-desc.image-box-fancy-open p, .img-box-fancy .image-box-fancy-desc.image-box-fancy-open .image-box-fancy-icon{ opacity:1; transform: translateX(0px); transition: opacity 1s .4s, transform .7s .2s; }