#image
{
height:calc(90vh - 50px);
background: url(bg3.jpg);
background-size:100% 100%;
}
#ul
{

bottom:0;
left:0;
margin:0;
padding:0;
background:#f00;
width:100%;
height:50px;
display:flex;
}
#ul #li
{
position:relative;
list-style:none;
width:20%;
height:100%;
mix-blend-mode:hue;
}
#ul:hover #li
{
	opacity:0;
}
#ul #li:hover
{
	opacity:1;
}
#ul #li:nth-child(1)
{
background:#ff5500;
}
#ul #li:nth-child(2)
{
background:#5500ff;
}
#ul #li:nth-child(3)
{
background:#00b3b3;
}
#ul #li:nth-child(4)
{
background:#44cc00;
}
#ul #li:nth-child(5)
{
background:#e645a0;
}
#ul #li:hover:nth-child(1)
{
	 width:100%;
  height:100px;
box-shadow: 0 0 0 700px #ff5500;
}
#ul #li:hover:nth-child(2)
{
	 width:100%;
  height:100px;
box-shadow: 0 0 0 700px #5500ff;
}
#ul #li:hover:nth-child(3)
{
	 width:100%;

box-shadow: 0 0 0 700px #00b3b3;
}
#ul #li:hover:nth-child(4)
{
	 width:100%;
  height:100px;
box-shadow: 0 0 0 700px #44cc00;
}
#ul #li:hover:nth-child(5)
{
	 width:100%;
  height:100px;
box-shadow: 0 0 0 700px #e645a0;
}