Проблема связана со свойством фильтра, оно не поддерживается в Internet Explorer 11, вы можете проверить Свойство фильтра CSS .
В качестве альтернативного обходного пути вы можете попробовать использовать следующий код:
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#visa,#mastercard {
display: none;
}
#visa + label > img {
background-image: url(../Images/Image1.jpg);
width: 500px;
height: 300px;
border: none;
color: white;
text-align: center;
font-size: 16px;
opacity: 0.2;
transition: 0.3s;
}
#mastercard + label > img {
background-image: url(../Images/Image2.jpg);
width: 500px;
height: 300px;
border: none;
color: white;
text-align: center;
font-size: 16px;
opacity: 0.2;
transition: 0.3s;
}
#visa + label > img:hover, #mastercard + label > img:hover {
opacity: 1
}
#visa:checked + label > img, #mastercard:checked + label > img {
opacity: 1
}
</style>
</head>
<body>
<input type="checkbox" id="visa" />
<label class="drinkcard-cc visa" for="visa"><img src="" id="lbl_visa" /></label>
<input type="checkbox" id="mastercard" />
<label class="drinkcard-cc mastercard" for="mastercard"><img src="" id="lbl_mastercard" /></label>
</body>
Результат как показано ниже:
