0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | /* slider nav and caption */ .tb-nivo-slider-wrapper .nivo-directionNav { height: 0; position:static; } .tb-nivo-slider-wrapper .nivo-directionNav a { top: 50%; transform: translate(0, -50%); position: absolute; background-image: none; width: 30px; height: 30px; opacity: 0; -webkit-transition: opacity 0.6s; /* Safari */ transition: opacity 0.6s; z-index: 100; } .tb-nivo-slider-wrapper:hover .nivo-directionNav a { opacity: 1; } .tb-nivo-slider-wrapper .nivo-directionNav a.nivo-prevNav { left: 10px; } .tb-nivo-slider-wrapper .nivo-directionNav a.nivo-nextNav { right: 10px; } .tb-nivo-slider-wrapper .nivo-directionNav a:after { display: block; position: absolute; font-family: 'FontAwesome'; color: #ffffff; content: '\f054'; width: 30px; height: 30px; padding: 2px 8px; text-indent: 0; top:0; font-size: 18px; text-align: right; background: #ff0000; opacity: 0.4; -webkit-transition: opacity 0.6s; /* Safari */ transition: opacity 0.6s; } .tb-nivo-slider-wrapper .nivo-directionNav a:hover:after { opacity: 1; } .tb-nivo-slider-wrapper .nivo-directionNav a.nivo-prevNav:after { content: '\f053'; text-align: left; } .tb-nivo-slider-wrapper .slides-wrapper { background: none } .tb-nivo-slider-wrapper .nivo-caption { bottom: inherit; top: 50%; transform: translate(0, -50%); right: 30px; left: inherit; width: 48%; } /* end slider nav and caption */ |