Question

我希望在鼠标悬停时放大我的图像。

然而，放大的图像显示了它下面的部分图像，有什么方法可以解决这个问题吗？

我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

非常感谢任何帮助！

Answer 1

有点难以回答，但请尝试包装您的输入元素并添加overflow: hidden。

使用CSS放大图像时如何不显示底层图像

1 个答案: