How to make the slider arrows appear smoothly with a hover, as with the example of FlexSlider ?

example

  • What exactly to do with them? The same appearance smooth? - Plikard
  • Yes, smooth appearance with hover. - pwnz22
  • Please describe the task completely in question. After some time, the link may become inoperative and the question will lose its meaning. - Nick Volynkin ♦
  • The answer is given. Problem solved. :) - pwnz22

1 answer 1

The basic idea is to hide the arrows outside the slider, giving them the value left and right -50px at position: absolute. Set these values ​​to positive when hovering. And add smoothness with transition.

#slider{ width: 500px; height: 150px; background: blue; position: relative; overflow: hidden; } .arrow{ position: absolute; width: 20px; height: 20px; top: 46%; background: #fff; opacity: 0; transition: 0.3s ease; } .left{ left: -20px; } .right{ right: -20px; } #slider:hover .left{ left: 20px; opacity: 1; } #slider:hover .right{ right: 20px; opacity: 1; } 
 <div id="slider"> <div class="arrow left"></div> <div class="arrow right"></div> </div>