I have a parent element with a hover effect (box shadow). When you hover over the parent:
PARENT:hover
then this child image (IMG) reacts very weird in Internet Explorer:
PARENT / DIV_6 / a / IMG
This is a simple illustration of the elements paths.
The image has NO CSS hover rule (that's the strange thing), but still reacts on hover. The image blurs on hover and even rotates -90 degrees! I see this on IE (11) on desktop ON HOVER over the image (not sure how this looks like on other devices / browsers). Only on Chrome I know everything looks good.
Below my fiddle and code snippet at the bottom of this question to show you. http://jsfiddle.net/7duub5jp/ Problem in Internet Explorer.
I already found that the use of an inset box shadow on the parent causes this behaviour of the child image. When I delete the box shadow, nothing goes wrong. When I change the box shadow to a not-inset-shadow, but another box shadow effect, then it's also working. So I found the cause of the problem, but I still have no solution.
So this is the cause:
#DIV_1:HOVER{box-shadow: 5px 5px rgba(169, 154, 154, 0.9), inset 0px 0px 9px rgba(255, 255, 255, 0.95), inset -0px -51px 9px rgba(255, 255, 255, 0.95);
Although I need to change something to solve this, my goal is to have the image stop reacting on hover of the parent, like it does not react in for example Chrome. But I want to keep the same shadow effect (or look-a-like) on hover and the same image.
How can I do this? Check the result in Internet Explorer and Chrome as a comparison.
#DIV_1 {
box-sizing: border-box;
color: rgb(62, 77, 92);
height: 365px;
position: relative;
text-align: center;
width: 233.5px;
perspective-origin: 116.75px 182.5px;
transform-origin: 116.75px 182.5px;
background: rgba(255, 255, 255, 0.952941) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(62, 77, 92);
font: normal normal normal normal 13px / normal 'Open Sans', Arial, sans-serif;
margin: 0px 0px 30px;
outline: rgb(62, 77, 92) none 0px;
padding: 12px 12px 16px;
}/*#DIV_1*/
#DIV_1:HOVER{box-shadow: 5px 5px rgba(169, 154, 154, 0.9), inset 0px 0px 9px rgba(255, 255, 255, 0.95), inset -0px -51px 9px rgba(255, 255, 255, 0.95);
background: rgb(213, 208, 216);}
#DIV_1:after {
box-sizing: border-box;
clear: both;
color: rgb(62, 77, 92);
display: block;
text-align: center;
visibility: hidden;
width: 209.5px;
perspective-origin: 104.75px 0px;
transform-origin: 104.75px 0px;
content: '"."';
border: 0px none rgb(62, 77, 92);
font: normal normal normal normal 0px / 0px 'Open Sans', Arial, sans-serif;
outline: rgb(62, 77, 92) none 0px;
}/*#DIV_1:after*/
#FORM_2 {
box-sizing: border-box;
color: rgb(62, 77, 92);
height: 321px;
text-align: center;
width: 209.5px;
perspective-origin: 104.75px 160.5px;
transform-origin: 104.75px 160.5px;
border: 0px none rgb(62, 77, 92);
font: normal normal normal normal 13px / normal 'Open Sans', Arial, sans-serif;
margin: 0px;
outline: rgb(62, 77, 92) none 0px;
}/*#FORM_2*/
#INPUT_3, #INPUT_4 {
color: rgb(62, 77, 92);
display: none;
height: auto;
width: auto;
perspective-origin: 50% 50%;
transform-origin: 50% 50%;
background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(62, 77, 92);
font: normal normal normal normal 13px / normal 'Open Sans', Arial, sans-serif;
outline: rgb(62, 77, 92) none 0px;
padding: 0px;
}/*#INPUT_3, #INPUT_4*/
#SCRIPT_5 {
box-sizing: border-box;
color: rgb(62, 77, 92);
text-align: center;
border: 0px none rgb(62, 77, 92);
font: normal normal normal normal 13px / normal 'Open Sans', Arial, sans-serif;
outline: rgb(62, 77, 92) none 0px;
}/*#SCRIPT_5*/
#DIV_6 {
box-sizing: border-box;
color: rgb(62, 77, 92);
height: 250px;
max-height: 250px;
position: relative;
text-align: center;
width: 209.5px;
perspective-origin: 104.75px 125px;
transform-origin: 104.75px 125px;
border: 0px none rgb(62, 77, 92);
font: normal normal normal normal 13px / normal 'Open Sans', Arial, sans-serif;
outline: rgb(62, 77, 92) none 0px;
overflow: hidden;
}/*#DIV_6*/
#A_7, #A_11, #A_21 {
box-sizing: border-box;
color: rgb(224, 34, 34);
text-align: center;
text-decoration: none;
border: 0px none rgb(224, 34, 34);
font: normal normal normal normal 13px / normal 'Open Sans', Arial, sans-serif;
outline: rgb(224, 34, 34) none 0px;
}/*#A_7, #A_11, #A_21*/
#IMG_8 {
box-sizing: border-box;
color: rgb(224, 34, 34);
display: block;
height: 287px;
max-width: 100%;
text-align: center;
vertical-align: middle;
width: 209.5px;
perspective-origin: 104.75px 143.5px;
transform-origin: 104.75px 143.5px;
border: 0px none rgb(224, 34, 34);
font: normal normal normal normal 13px / normal 'Open Sans', Arial, sans-serif;
outline: rgb(224, 34, 34) none 0px;
}/*#IMG_8*/
#DIV_9 {
box-sizing: border-box;
color: rgb(62, 77, 92);
height: 250px;
left: 0px;
position: absolute;
text-align: center;
top: 0px;
width: 209.5px;
align-self: stretch;
perspective-origin: 104.75px 125px;
transform-origin: 104.75px 125px;
border: 0px none rgb(62, 77, 92);
font: normal normal normal normal 13px / normal 'Open Sans', Arial, sans-serif;
outline: rgb(62, 77, 92) none 0px;
}/*#DIV_9*/
#A_10 {
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: inline-block;
height: 25px;
position: relative;
text-align: center;
text-decoration: none;
text-transform: uppercase;
top: 212.5px;
vertical-align: middle;
white-space: nowrap;
width: 57px;
perspective-origin: 28.5px 12.5px;
transform-origin: 28.5px 12.5px;
background: rgb(232, 77, 28) none repeat scroll 0% 0% / auto padding-box border-box;
border: 1px solid rgb(255, 255, 255);
border-radius: 4px 4px 4px 4px;
font: normal normal normal normal 12px / 17.1429px 'Open Sans', Arial, sans-serif;
margin: -13px 5px 0px;
outline: rgb(255, 255, 255) none 0px;
padding: 3px 10px;
}/*#A_10*/
#DIV_12 {
box-sizing: border-box;
color: rgb(224, 34, 34);
height: 46px;
text-align: center;
width: 209.5px;
perspective-origin: 104.75px 23px;
transform-origin: 104.75px 23px;
border: 0px none rgb(224, 34, 34);
font: normal normal normal normal 13px / normal 'Open Sans', Arial, sans-serif;
margin: 0px 0px 5px;
outline: rgb(224, 34, 34) none 0px;
}/*#DIV_12*/
#H3_13 {
box-sizing: border-box;
height: 30px;
text-align: center;
width: 209.5px;
perspective-origin: 104.75px 15px;
transform-origin: 104.75px 15px;
font: normal normal 300 normal 14px / normal 'Open Sans', sans-serif;
margin: 0px 0px 10px;
padding: 10px 0px 4px;
}/*#H3_13*/
#DIV_14 {
box-sizing: border-box;
color: rgb(224, 34, 34);
height: 15px;
text-align: center;
width: 209.5px;
perspective-origin: 104.75px 7.5px;
transform-origin: 104.75px 7.5px;
border: 0px none rgb(224, 34, 34);
font: normal normal normal normal 13px / normal 'Open Sans', Arial, sans-serif;
outline: rgb(224, 34, 34) none 0px;
}/*#DIV_14*/
#DIV_15 {
box-sizing: border-box;
color: rgb(224, 34, 34);
text-align: center;
width: 209.5px;
perspective-origin: 104.75px 0px;
transform-origin: 104.75px 0px;
border: 0px none rgb(224, 34, 34);
font: normal normal normal normal 13px / normal 'Open Sans', Arial, sans-serif;
outline: rgb(224, 34, 34) none 0px;
}/*#DIV_15*/
#DIV_16 {
box-sizing: border-box;
color: rgb(224, 34, 34);
text-align: center;
width: 167.594px;
perspective-origin: 83.7969px 0px;
transform-origin: 83.7969px 0px;
border: 0px none rgb(224, 34, 34);
font: normal normal normal normal 13px / normal 'Open Sans', Arial, sans-serif;
outline: rgb(224, 34, 34) none 0px;
}/*#DIV_16*/
#DIV_17 {
box-sizing: border-box;
color: rgb(232, 77, 28);
float: left;
height: 22px;
text-align: center;
width: 55.0625px;
perspective-origin: 27.5313px 11px;
transform-origin: 27.5313px 11px;
border: 0px none rgb(232, 77, 28);
font: normal normal normal normal 18px / normal 'PT Sans Narrow', sans-serif;
outline: rgb(232, 77, 28) none 0px;
padding: 1px 0px 0px;
}/*#DIV_17*/
#SPAN_18 {
box-sizing: border-box;
color: rgb(232, 77, 28);
text-align: center;
border: 0px none rgb(232, 77, 28);
font: normal normal normal normal 18px / normal 'PT Sans Narrow', sans-serif;
outline: rgb(232, 77, 28) none 0px;
}/*#SPAN_18*/
#DIV_19 {
box-sizing: border-box;
color: rgb(62, 77, 92);
height: 5px;
text-align: center;
width: 209.5px;
perspective-origin: 104.75px 2.5px;
transform-origin: 104.75px 2.5px;
border: 0px none rgb(62, 77, 92);
font: normal normal normal normal 13px / normal 'Open Sans', Arial, sans-serif;
outline: rgb(62, 77, 92) none 0px;
padding: 0px 0px 5px;
}/*#DIV_19*/
#INPUT_20 {
color: rgb(255, 255, 255);
cursor: pointer;
display: block;
float: right;
height: 28px;
text-align: center;
text-transform: uppercase;
vertical-align: middle;
white-space: nowrap;
width: 73px;
align-items: flex-start;
perspective-origin: 36.5px 14px;
transform-origin: 36.5px 14px;
background: rgb(66, 139, 202) none repeat scroll 0% 0% / auto padding-box border-box;
border: 1px solid rgb(237, 237, 237);
border-radius: 4px 4px 4px 4px;
font: normal normal normal normal 14px / 20px 'Open Sans', Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
padding: 3px 9px;
}/*#INPUT_20*/
#DIV_22 {
box-sizing: border-box;
color: rgb(224, 34, 34);
height: 63px;
left: 0px;
position: absolute;
text-align: center;
top: 0px;
width: 63px;
align-self: stretch;
perspective-origin: 31.5px 31.5px;
transform-origin: 31.5px 31.5px;
background: rgba(0, 0, 0, 0) url(http://www.modernedesignmeubels.nl/shop/avactis-themes/metro/images/discount-star.png) no-repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(224, 34, 34);
font: normal normal normal normal 13px / normal 'Open Sans', Arial, sans-serif;
outline: rgb(224, 34, 34) none 0px;
}/*#DIV_22*/
#DIV_23 {
box-sizing: border-box;
color: rgb(255, 0, 0);
text-align: center;
width: 209.5px;
perspective-origin: 104.75px 0px;
transform-origin: 104.75px 0px;
border: 0px none rgb(255, 0, 0);
font: normal normal normal normal 10.6667px / normal 'Open Sans', Arial, sans-serif;
outline: rgb(255, 0, 0) none 0px;
}/*#DIV_23*/<div id="DIV_1">
<form action="http://www.modernedesignmeubels.nl/shop/cart.php" name="ProductForm_91" id="FORM_2" method="post">
<input type="hidden" name="asc_action" value="AddToCart" id="INPUT_3" />
<input type="hidden" name="prod_id" value="91" id="INPUT_4" />
<script type="text/javascript" id="SCRIPT_5">function ProductFormSubmit_91()
{
document.forms['ProductForm_91'].submit();
};
</script>
<div id="DIV_6">
<a href="http://www.modernedesignmeubels.nl/shop/product-info.php?Ice_Age_3_-_Dawn_of_the_Dinosaurs___Scrat_Pack-pid91.html" id="A_7"><img alt="Ice Age 3 - Dawn of the Dinosaurs" width="275" src="http://www.modernedesignmeubels.nl/shop/avactis-images/thumb_hous-1_2.jpg" id="IMG_8" /></a>
<div id="DIV_9">
<a href="http://www.modernedesignmeubels.nl/shop/avactis-images/hous-1_2.jpg" id="A_10">Zoom</a>
</div>
</div><a href="http://www.modernedesignmeubels.nl/shop/product-info.php?Ice_Age_3_-_Dawn_of_the_Dinosaurs___Scrat_Pack-pid91.html" id="A_11"></a>
<div id="DIV_12">
<h3 id="H3_13">
Ice Age 3 - Dawn of the Din ...
</h3>
</div>
<div id="DIV_14">
<div id="DIV_15">
<div id="DIV_16">
</div>
</div>
</div>
<div id="DIV_17">
<span id="SPAN_18">$23.99</span>
</div>
<div id="DIV_19">
<input type="submit" value="Bestel" id="INPUT_20" />
</div><a href="http://www.modernedesignmeubels.nl/shop/product-info.php?Ice_Age_3_-_Dawn_of_the_Dinosaurs___Scrat_Pack-pid91.html" id="A_21"></a>
<div id="DIV_22">
</div>
<div id="DIV_23">
</div>
</form>
</div>