How to not show underlying image when magnify image using CSS

Question

I am looking to magnify my images upon mouse hover.

However, the magnified image shows parts of the images that are below it, is there any way to fix this?

My code:

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

Will really appreciate any help!

Answer 1

A little hard to answer, but try wrapping your input element and adding overflow: hidden.