CSSを使用して画像を拡大すると、下にある画像が表示されないようにするには

Question

マウスを動かすと画像が拡大されます。

しかし、拡大された画像には、その下にある画像の一部が表示されますが、これを修正する方法はありますか？

マイコード：

.colour-selector input { 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    appearance: none; 
 
} 
 
.colour-black { 
 
    background-image: url({{ 'Colour_-_Black.png' | asset_url }}); 
 
} 
 
.colour-blue { 
 
    background-image: url({{ 'Colour_-_Blue-suede.png' | asset_url  }}); 
 
} 
 
.colour-selector input:active +.colour-cc { 
 
    opacity: 0.9; 
 
} 
 
.colour-selector input:checked +.colour-cc { 
 
    -webkit-filter: none; 
 
    -moz-filter: none; 
 
    filter: none; 
 
} 
 
.colour-cc { 
 
    cursor: pointer; 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    display: inline-block; 
 
    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 { 
 
    -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(3); 
 
    /* Safari and Chrome */ 
 
    -moz-transform: scale(3); 
 
    /* Firefox */ 
 
    -ms-transform: scale(3); 
 
    /* IE 9 */ 
 
    -o-transform: scale(3); 
 
    /* Opera */ 
 
    transform: scale(3); 
 
}

<div class="colour-selector"> 
 
    <input id="colour-black" type="radio" name="properties[colour]" value="colour-black" /> 
 
    <label class="colour-cc colour-black" for="colour-black"></label> 
 
    <input id="colour-blue" type="radio" name="properties[colour]" value="colour-blue" /> 
 
    <label class="colour-cc colour-blue" for="colour-blue"></label> 
 
</div>

は本当に任意の助けを感謝します！

Answer 1

少し難解ですが、入力要素をラップして、overflow: hiddenを追加してみてください。