HTML-индекс для эффектов фильтра

Question

Я использую изображения для своего переключателя. Я знаю, что эффекты фильтра CSS будут влиять на свойства z-index.

Я создал образец скрипку:

https://jsfiddle.net/iambong/2kcvv3bL/1/

CSS:

.colour-black{background-image:url(https://s28.postimg.org/p585381cd/Colour_Black.png);} 
.colour-blue{background-image:url(https://s24.postimg.org/clxbf89g5/Colour_Blue_suede.png);} 
.colour-chestnut-brown{background-image:url(https://s23.postimg.org/swdj7nh6z/Colour_Chestnut_Brown.png);} 

.colour-selector input{ 
position:relative; 
z-index:2 !important; 
overflow: hidden; 
background-repeat:no-repeat; 
border: none; 
margin:0;padding:0; 
-webkit-appearance:none; 
    -moz-appearance:none; 
     appearance:none; 
} 

.colour-selector input:active +.colour-cc{opacity: 0.9; position:relative; z-index:2;} 
.colour-selector input:checked +.colour-cc{ 
position:relative; 
z-index:2; 
-webkit-filter: none; 
    -moz-filter: none; 
     filter: none; 
} 

.colour-cc{ 
positon:relative; 
    z-index:3 !important; 
background-size:contain; 
background-repeat:no-repeat; 
display:inline-block; 
overflow: hidden; 
padding: 8px; 
margin-bottom: 8px; 
align: left; 
width:100px;height:70px; 
-webkit-transition: all 100ms ease-in; 
    -moz-transition: all 100ms ease-in; 
     transition: all 100ms ease-in; 
-webkit-filter: brightness(1.8) grayscale(1) opacity(.7); 
    -moz-filter: brightness(1.8) grayscale(1) opacity(.7); 
     filter: brightness(1.8) grayscale(1) opacity(.7); 
} 

.colour-cc:hover{ 
positon:relative; 
z-index:10 !important; 
overflow: hidden; 
display:inline-block; 
-webkit-filter: brightness(1.2) grayscale(.5) opacity(0.9); 
    -moz-filter: brightness(1.2) grayscale(.5) opacity(0.9); 
     filter: brightness(1.2) grayscale(.5) opacity(0.9); 
-webkit-transform:scale(2.5); /* Safari and Chrome */ 
-moz-transform:scale(2.5); /* Firefox */ 
-ms-transform:scale(2.5); /* IE 9 */ 
-o-transform:scale(2.5); /* Opera */ 
transform:scale(2.5); 


} 

HTML:

<p>Colour Selection</p>     

<div class="colour-selector"; style="position:relative; left:100px; top:50px; z-index:1;"> 

    <input id="colour-black" type="radio" name="properties[colour]" value="colour-black" style="position:relative; z-index:3;"/> 
    <label class="colour-cc colour-black" for="colour-black"></label> 
     <input id="colour-blue" type="radio" name="properties[colour]" value="colour-blue" style="position:relative; z-index:3;"/> 
    <label class="colour-cc colour-blue" for="colour-blue"></label> 
    <input id="colour-chestnut-brown" type="radio" name="properties[colour]" value="colour-chestnut-brown" style="position:relative; z-index:3;"/> 
    <label class="colour-cc colour-chestnut-brown" for="colour-chestnut-brown"></label> 

</div> 

Что я хочу: Что я надеюсь достичь является то, что при наведении мыши (зависании) увеличенное изображение будет целым и не показывать части соседних изображений

Что плохое в настоящее время: Если навести курсор мыши на среднюю картинку, увеличенное изображение (с помощью шкалы преобразования в CSS) показывает части соседних изображений

Спасибо вы за любую помощь!

Answer 1

использовать что-то вроде этого:

#nav{z-index:2} 
 
#nav li{display:inline-block; 
 
    text-align:center; 
 
    padding:10px; 
 
    color:#fff; 
 
    
 
    cursor:pointer; 
 
height:50px; 
 
    width:100px; 
 
list-style-type:none;} 
 

 
#nav ul li:nth-child(1){background:#b4b4b4;} 
 
#nav ul li:nth-child(2){background:#cecece;} 
 
#nav ul li:nth-child(3){background:#b4b4b4;} 
 

 

 
#nav ul:hover li { 
 
      transform: translateX(-24%); 
 
    z-index:4; 
 
} 
 
#nav ul:hover li:hover { 
 
    
 
      transform: scale(1.5); 
 
      transition-duration: 0.18182s; 
 
} 
 
#nav li:hover ~ li { 
 
      transform: translateX(24%); 
 
    
 
}

<div id="nav"> 
 
    <ul> 
 
    <li><p></p></li> 
 
    <li><p></p></li> 
 
    
 
    
 
    <li><p></p></li></ul> 
 
    
 
    
 
      
 
     
 
    </div>