我希望在鼠标悬停时放大我的图像。
然而,放大的图像显示了它下面的部分图像,有什么方法可以解决这个问题吗?
我的代码:
.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>
&#13;
非常感谢任何帮助!
答案 0 :(得分:0)
有点难以回答,但请尝试包装您的输入元素并添加overflow: hidden
。