Z-индекс изображения при наведении на несколько SVG полигонов

#html #css #svg #css_animation

Я работаю над SVG, моя концепция состоит в том, что у меня есть два изображения,
которые пересекаются друг с другом, и используя многоугольник SVG, я сделал пять разных
треугольников. 

Моя цель - добиться первого наложения части фигуры от полного отображения изображения
 при наведении курсора на фон фигуры.  Границы  многоугольника также должны быть видны.  

Это мой исходный код перед наложением изображения:



.box {
  position: relative;
  background-image: url('https://picsum.photos/id/1/1000/800');
  background-repeat: no-repeat;
  width: 100%;
  height: 600px;
  background-size: cover;
}

polygon {
  stroke-width: 1;
  stroke: red;
  fill: #ffffff;
}

polygon:hover {
  fill: transparent;
}

  





Теперь я добавил overlay изображение, которое должно располагаться над изображением
.box и многоугольниками. Теперь, при наведении курсора, я хочу отобразить .box изображение
в текущей форме многоугольника, как это    

   

код здесь:



.box {
  position: relative;
  background-image: url('https://picsum.photos/id/1/1000/800');
  background-repeat: no-repeat;
  width: 100%;
  height: 600px;
  background-size: cover;
}

polygon {
  stroke-width: 1;
  stroke: red;
  fill: #ffffff;
}

polygon:hover {
  fill: transparent;
}

.overlay:hover polygon {
  z-index: 100;
}

.overlay {
  position: absolute;
  background-image: url('https://picsum.photos/id/118/1000/800');
  background-repeat: no-repeat;
  width: 100%;
  height: 600px;
  background-size: cover;
  z-index: 10;
}



  





Может ли кто-нибудь помочь мне с этим при наведении курсора. Нужно отрегулировать
z-индексы div и заполнения полигонов.
    

Ответы

Ответ 1

rect, polygon {
  stroke-width: 0;
  fill: none;
  pointer-events: all;
}

rect, polygon:hover {
  fill: url(#f);
}





Если нижняя часть изображения не нужна, то так:



svg {
  overflow: hidden;
}

polygon {
  stroke-width: 0;
  stroke: transparent;
  fill: none;
  pointer-events: all;
}

polygon:hover {
  fill: url(#f);
}



Ответ 2

Я  скорректировал код моего предыдущего ответа, как показано ниже:     



.box {
  width:450px;
  height:250px;
  position:relative;
  overflow:hidden;
  z-index:0;
  background:url(https://picsum.photos/id/13/1000/800) center/cover;
}
.box > div {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-size:cover;
  background-position:center;
  opacity:0;
}
.box > div:nth-child(1) {
  clip-path:polygon(20% 0,80% 0, 50% 100%);
}
.box > div:nth-child(2) {
  clip-path:polygon(0 0, 20% 0,50% 100%,0 40%);
}
.box > div:nth-child(3) {
  clip-path:polygon(100% 0,80% 0,50% 100%,100% 40%);
}

.box > div:nth-child(4) {
  clip-path:polygon(0 100%,50% 100%,0 40%);
}
.box > div:nth-child(5) {
  clip-path:polygon(100% 100%,50% 100%,100% 40%);
}

.box > div:hover {
   opacity:1;
}

  

  

  

  

  






Вот иллюстрация, чтобы показать вам различные точки, используемые в пути клипа 

  

С тем же изображением? как у автора: 



.box {
  width:450px;
  height:250px;
  position:relative;
  overflow:hidden;
  z-index:0;
  background:url(https://picsum.photos/id/13/1000/800) center/cover;
}
.box > div {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-image:url(https://picsum.photos/id/118/1000/800);
  background-size:cover;
  background-position:center;
  opacity:0;
}
.box > div:nth-child(1) {
  clip-path:polygon(20% 0,80% 0, 50% 100%);
}
.box > div:nth-child(2) {
  clip-path:polygon(0 0, 20% 0,50% 100%,0 40%);
}
.box > div:nth-child(3) {
  clip-path:polygon(100% 0,80% 0,50% 100%,100% 40%);
}

.box > div:nth-child(4) {
  clip-path:polygon(0 100%,50% 100%,0 40%);
}
.box > div:nth-child(5) {
  clip-path:polygon(100% 100%,50% 100%,100% 40%);
}

.box > div:hover {
   opacity:1;
}

  

  

  

  

  






Источник ответа: @Temani Afif


Ответ 3

Решение @Temani Afif только на CSS очень хорошее   

Однако, будьте осторожны, это все еще не поддерживается ни в Safari, ни в IE / Edge.

Для этих браузеров вам понадобится использовать SVG, который также реализует элемент
.   



.overlay {
  background-image: url('https://picsum.photos/id/118/1000/800');
  background-repeat: no-repeat;
  background-size: cover;
}
.overlay use {
  opacity: 0;
}
.overlay use:hover {
  opacity: 1;
}






Так что,  это более многострочно в коде, но это должно работать в любом браузере
начиная с IE9.  

Источник ответа: @Kaiido