.blook-post-nav{ .blook-arrow-section{ height: 100%; width: 70px; background-color: rgba($color_light_gray,0.9); font-size: 40px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; @include transition(); } } .blook-post-nav-post{ display: flex; flex-wrap: wrap; width: 350px; max-width: 100%; background-color: rgba($color_light_gray,0.9); padding: 0 7.5px; height: 100%; align-items: center; @include transition(); .blook-desc{ flex: 0 0 calc(100% - 100px); max-width: calc(100% - 100px); padding: 0 7.5px; .blook-post-title{ margin: 0; } } .blook-image-section{ flex: 0 0 85px; max-width: 85px; height: 70px; margin-left: 7.5px; margin-right: 7.5px; } } .blook-post-nav{ position: fixed; z-index: 2; top: 50%; width: 70px; height: 90px; overflow: hidden; @include transform(translateY(-50%)); &:hover{ width: 350px; } .blook-arrow-section, .blook-post-nav-post{ position: absolute; top: 0; } } .blook-post-nav-prev{ left: 0; &:hover{ .blook-arrow-section{ left: -100px; opacity: 0; } .blook-post-nav-post{ left: 0; opacity: 1; } } .blook-arrow-section{ left: 0; } .blook-post-nav-post{ left: -400px; opacity: 0; } } .blook-post-nav-next{ right: 0; &:hover{ .blook-arrow-section{ right: -100px; opacity: 0; } .blook-post-nav-post{ right: 0; opacity: 1; } } .blook-arrow-section{ right: 0; } .blook-post-nav-post{ right: -400px; opacity: 0; } }