Css Slider - Hover Functionality Rather Than Click

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 com

Solution 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;
}

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