Image z-index onhover mutiple SVG polygon

Question

I'm working on SVG here my concept is I have two images .overlap with each other and using svg polygon I made five different triangles. my aim to achieve first overlay complete image display and when hover on triangles shapes background .box box image needs to display. This is my initial code before giving an overlay image.

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

<div class="box">
  <svg viewbox="0 0 200 100">
		<polygon points="0,100 100,100 0,50 "
			    style="stroke:#000000;"/>
		<polygon points="0,50 100,100 50,00 0,0 "
			    style="stroke:#000000;"/>
		<polygon points="100,100 50,00 150,0"
			    style="stroke:#000000;"/>
		<polygon points="100,100 200,50 200,0 150,0"
			    style="stroke:#000000;"/>
		<polygon points="100,100 200,100, 200,50"
			    style="stroke:#000000;"/>
	</svg>
</div>

Now I have added overlay image need to come above the .box image and polygons shapes. Now, hover I want to display .box image in a current polygon shape like this

Code here

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

<div class="overlay"></div>
<div class="box">

  <svg viewbox="0 0 200 100">
		<polygon points="0,100 100,100 0,50 "
			    style="stroke:#000000;"/>
		<polygon points="0,50 100,100 50,00 0,0 "
			    style="stroke:#000000;"/>
		<polygon points="100,100 50,00 150,0"
			    style="stroke:#000000;"/>
		<polygon points="100,100 200,50 200,0 150,0"
			    style="stroke:#000000;"/>
		<polygon points="100,100 200,100, 200,50"
			    style="stroke:#000000;"/>
	</svg>
</div>

Can anyone help me out this on hover we need to adjust the z-indexes of the divs and polygon fill.

Answer 1

Temani's CSS only solution is great, however, beware this is still not supported in Safari nor in IE/Edge.

For these browsers, you'll need to fallback on SVG, which also implements a <clipPath> element.

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

<svg class="overlay" viewBox="0 0 200 100">
  <defs>
    <clipPath id='clip-1'>
      <polygon points="0,100 100,100 0,50"/>
    </clipPath>
    <clipPath id='clip-2'>
      <polygon points="0,50 100,100 50,00 0,0"/>
    </clipPath>
    <clipPath id='clip-3'>
      <polygon points="100,100 50,00 150,0"/>
    </clipPath>
    <clipPath id='clip-4'>
      <polygon points="100,100 200,50 200,0 150,0"/>
    </clipPath>
    <clipPath id='clip-5'>
      <polygon points="100,100 200,100, 200,50"/>
    </clipPath>
    <image id="img" x="0" y="0" width="200" height="100" preserveAspectRatio="xMidYMid slice"
      xlink:href="https://picsum.photos/id/1/1000/800" />
  </defs>
  <use xlink:href="#img" clip-path="url(#clip-1)"/>
  <use xlink:href="#img" clip-path="url(#clip-2)"/>
  <use xlink:href="#img" clip-path="url(#clip-3)"/>
  <use xlink:href="#img" clip-path="url(#clip-4)"/>
  <use xlink:href="#img" clip-path="url(#clip-5)"/>
</svg>
<div class="box"></div>

So, yes, it's more verbose, but it should work in every browser since IE9.

Answer 2

I would adjust the code of my previous answer like below:

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

<div class="box">
  <div style="background-image:url(https://picsum.photos/id/1/1000/800)"></div>
  <div style="background-image:url(https://picsum.photos/id/10/1000/800)"></div>
  <div style="background-image:url(https://picsum.photos/id/90/1000/800)"></div>
  <div style="background-image:url(https://picsum.photos/id/102/1000/800)"></div>
  <div style="background-image:url(https://picsum.photos/id/118/1000/800)"></div>
</div>

Here is an illustration to show you the different points used in clip-path

With the same image:

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

<div class="box">
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

Answer 3

If you wanted the svg to appear above it's parent div, you could change the attributes of the svg element like below:

   /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
   /*necessary for expanding .box div and svg*/
   /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
   html,body{
    width:100%;
    height:100%;
   }
   
   .box {
      width:100%;
      height:100%;
      
      position: relative;
      background-image: url('https://picsum.photos/id/1/1000/800');
      background-repeat: no-repeat;
      width: 100%;
      
      /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      /*I CHANGED HEIGHT TO 100% FOR BOX AS IT WASNT SPANNING THE ENTIRE PAGE - in turn, the "overlay"
      div's background image could be seen...*/
      /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      height: 100%;
      background-size: cover;
    }
    
    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /*position the svg element relative to its parent so it can be moved up with z-index*/
    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    svg{
      position:relative;
      z-index:999;
    }

    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: 100%;
      background-size: cover;
      z-index: 10;
    }

<div class="overlay"></div>
<div class="box">

  <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
  <!--in order to make the svg span the entirety of its parent, I set width and height attributes
  for it to 100%-->
  <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
  <svg width="100%" height="100%" preserveAspectRatio="none" viewbox="0 0 200 100">
    <polygon points="0,100 100,100 0,50 "
          style="stroke:#000000;"/>
    <polygon points="0,50 100,100 50,0 0,0 "
          style="stroke:#000000;"/>
    <polygon points="100,100 50,00 150,0"
          style="stroke:#000000;"/>
    <polygon points="100,100 200,50 200,0 150,0"
          style="stroke:#000000;"/>
    <polygon points="100,100 200,100, 200,50"
          style="stroke:#000000;"/>
  </svg>
</div>