CSS Slider - Hover functionality rather than click

Question

I have a css slider (code attached). It's working fine when buttons are clicked, however, I would prefer to get each banner to slide when the buttons are hovered on.

I tried to combine the :hover and :target events but didn't have any luck.

If anyone knows of a way to get the sliding functionality on hover then that would be great.

Thanks for any help. I would like to achieve this with CSS only, if possible.

 body { margin: 0; padding: 0; } .slider-holder { width: 600px; height: 280px; background-color: yellow; text-align: center; overflow: hidden; } .image-holder { width: 3000px; background-color: red; height: 280px; clear: both; position: relative; -webkit-transition: left 2s; -moz-transition: left 2s; -o-transition: left 2s; transition: left 2s; } .slider-image { float: left; margin: 0px; padding: 0px; position: relative; } #slider-image-0:target~.image-holder { left: 0px; } #slider-image-1:target~.image-holder { left: -600px; } #slider-image-2:target~.image-holder { left: -1200px; } #slider-image-3:target~.image-holder { left: -1800px; } #slider-image-4:target~.image-holder { left: -2400px; } .button-holder>a>img { padding-left: 35px; padding-right: 35px; } 

 <div class="slider-holder"> <span id="slider-image-0"></span> <span id="slider-image-1"></span> <span id="slider-image-2"></span> <span id="slider-image-3"></span> <span id="slider-image-4"></span> <div class="image-holder"> <img src="https://via.placeholder.com/600x280" class="slider-image" /> <img src="https://via.placeholder.com/600x280" class="slider-image" /> <img src="https://via.placeholder.com/600x280" class="slider-image" /> <img src="https://via.placeholder.com/600x280" class="slider-image" /> <img src="https://via.placeholder.com/600x280" class="slider-image" /> </div> </div> <div class="button-holder"> <a href="#slider-image-1"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a> <a href="#slider-image-2"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a> <a href="#slider-image-3"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a> <a href="#slider-image-4"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a> </div> 

Answer 1

You can try to use some transition hacks but you have to change the html structure to be able to use sibling selector.

Here is an idea where I used flexbox in order to keep the same structure visually:

 body { margin: 0; padding: 0; } .container { display:flex; width:600px; flex-wrap:wrap; justify-content:space-between; } .slider-holder { order:-1; width: 600px; height: 280px; background-color: yellow; text-align: center; overflow: hidden; } .image-holder { width: 3000px; background-color: red; height: 280px; clear: both; position: relative; transition: left 7000s; /*Use a big value to block the image change*/ left: 0; } .slider-image { float: left; margin: 0px; padding: 0px; position: relative; } a[href="#slider-image-0"]:hover~.slider-holder .image-holder { left: 0.5px; /*Yes it's not 0px here, we need something different from the initial state to be able to trigger the transition (Yes I know it's not intuitive ..)*/ transition: left 1s; } a[href="#slider-image-1"]:hover~.slider-holder .image-holder { left: -600px; transition: left 1s; } a[href="#slider-image-2"]:hover~.slider-holder .image-holder { left: -1200px; transition: left 1s; } a[href="#slider-image-3"]:hover~.slider-holder .image-holder { left: -1800px; transition: left 1s; } a[href="#slider-image-4"]:hover~.slider-holder .image-holder { left: -2400px; transition: left 1s; } .button-holder>a>img { padding-left: 35px; padding-right: 35px; } 

 <div class="container"> <a href="#slider-image-0"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a> <a href="#slider-image-1"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a> <a href="#slider-image-2"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a> <a href="#slider-image-3"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a> <a href="#slider-image-4"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a> <div class="slider-holder"> <div class="image-holder"> <img src="https://via.placeholder.com/600x280/ff0000" class="slider-image" /> <img src="https://via.placeholder.com/600x280/00ff00" class="slider-image" /> <img src="https://via.placeholder.com/600x280/f0f0f0" class="slider-image" /> <img src="https://via.placeholder.com/600x280/0000ff" class="slider-image" /> <img src="https://via.placeholder.com/600x280" class="slider-image" /> </div> </div> </div>