Slider Pure Css => Text Instead Of Bullets Point / Hover On Text To Change Image

I'm trying to do a Pure CSS slider but I tried many options (visibility: hidden;, z-index: 11,22,33..) but I didn't find the right way to make it works. I would like to show a defa

Solution 1:

A pure CSS solution can be easily done with flexbox. Just set the img container as a sibling of the buttons so you can access it with the ~ general sibling combinator, then use flex-basis:100% and flex-wrap:wrap on the container so it occupies a full row, and negative order so it gets visually above the buttons.

.flex-buttons{
  width:100%;
  display:flex;
  flex-wrap:wrap;
}

.flex-buttonsbutton{
  flex:1;
  cursor:pointer;
}


.flex-buttonsbutton:nth-child(1):hover ~ .imgs{
  background:red;
}

.flex-buttonsbutton:nth-child(2):hover ~ .imgs{
  background:green;
}

.flex-buttonsbutton:nth-child(3):hover ~ .imgs{
  background:blue;
}

.flex-buttonsbutton:nth-child(4):hover ~ .imgs{
  background:purple;
}

.flex-buttonsbutton:nth-child(5):hover ~ .imgs{
  background:orange;
}

.imgs{
  order:-1;
  flex-basis:100%;
  height:100px;
  border:2px solid grey;
}

<divclass="flex-buttons"><button> Image 1 </button><button> Image 2 </button><button> Image 3 </button><button> Image 4 </button><button> Image 5 </button><divclass="imgs"></div></div>

Replace the background colors with your imgs and style as needed.

Solution 2:

It works perfectly in the console (without the custom css style I'm working on), but on my website 4th and 5th slide aren't displayed... kind of weird!!

.flex-buttons{
  width:100%;
  display:flex;
  flex-wrap:wrap;
	background-image: url('https://www.jacquesgiral.com/wp-content/uploads/jg-photo/0-jacques-giral-photographie-accueil-paris.jpg');
	  height:450px;
	
}

.flex-buttonsbutton{
  flex:1;
  cursor:pointer;
	margin-top:2%;
}


.flex-buttonsbutton:nth-child(1):hover ~ .imgs{
  background-image: url('https://www.jacquesgiral.com/wp-content/uploads/jg-photo/1-archi-deco.jpg');
	

}

.flex-buttonsbutton:nth-child(2):hover ~ .imgs{
  background-image: url('https://www.jacquesgiral.com/wp-content/uploads/jg-photo/2-bijoux-montre.jpg');

}

.flex-buttonsbutton:nth-child(3):hover ~ .imgs{
  background-image: url('https://www.jacquesgiral.com/wp-content/uploads/jg-photo/3-cosmetique.jpg');

}

.flex-buttonsbutton:nth-child(4):hover ~ .imgs{
  background-image: url('https://www.jacquesgiral.com/wp-content/uploads/jg-photo/4-edition.jpg');

}

.flex-buttonsbutton:nth-child(5):hover ~ .imgs{
 background-image: url('https://www.jacquesgiral.com/wp-content/uploads/jg-photo/5-people.jpg');
   

}

.imgs{
  order:-1;
	
  flex-basis:100%;
  height:450px;
	background-size:cover;
	background-repeat: no-repeat;

  
}

<divclass="flex-buttons"><button><aclass="button-slider"title="Lien vers ARCHI-DÉCO"href="#"rel="bookmark">ARCHI-DÉCO</a></button><button><aclass="button-slider"title="Lien vers BIJOUX-MONTRE"href="#"rel="bookmark">BIJOUX-MONTRE</a></button><button><aclass="button-slider"title="Lien vers COSMÉTIQUE"href="#"rel="bookmark">COSMÉTIQUE</a></button><button><aclass="button-slider"title="Lien vers ÉDITION"href="#"rel="bookmark">ÉDITION</a></button><button><aclass="button-slider"title="Lien vers PEOPLE"href="#"rel="bookmark">PEOPLE</a></button><divclass="imgs"></div></div>