I am currently utilizing images as radio buttons, but I am encountering an issue with CSS filter effects impacting the z-index properties.
Here is a sample fiddle that I have created to demonstrate the problem:
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>
Desired Outcome: I would like the magnified image on mouse-over (hover) to display without showing parts of neighboring images.
Current Issue: Currently, when hovering over the middle picture, the magnified image using transform scale in the CSS shows parts of the neighboring images.
Any assistance is greatly appreciated! Thank you!