Hover effect on IE10 - html

Question

I cannot understand why a simple hover effect on a div won't work in IE10.
CSS:
.portfolio {
margin-bottom: 130px;
.portfolioContainer {
display: flex;
flex-wrap: wrap;
margin-left: -10px;
margin-right: -10px;
.portfolioBox {
display: flex;
width: 50%;
height: 250px;
padding: 10px;
.moreBoxInfo {
display: none;
}
.portfolioBoxLogo {
width: 50%;
background-color: $lighter_gray;
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
img {
display: block;
transform: scale(0.8);
max-width: 90%;
width: 100%;
}
}
.portfolioBoxImg {
width: 50%;
background-position: center;
background-size: cover;
position: relative;
cursor: pointer;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: $primary;
opacity: 0;
transition: opacity .5s;
z-index: 1;
}
.portfolioBoxText {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 20px;
opacity: 0;
transition: opacity .5s;
z-index: 2;
p {
font-size: 16px;
line-height: 20px;
text-align: left;
}
}
.more {
position: absolute;
right: 20px;
bottom: 20px;
#include fontFamilySize("HelveticaNeueThin", 36px, 42px);
cursor: pointer;
display: none;
z-index: 3;
}
&:hover {
&:before {
opacity: .95;
}
.portfolioBoxText {
opacity: 1;
}
.more {
display: block;
}
}
}
}
}
}
HTML:
<div class="portfolio">
<div class="portfolioContainer">
<div class="portfolioBox">
<div style="background-image: url( img/participadas/forcemanager-img.jpg)" class="portfolioBoxImg">
<div class="portfolioBoxText">
<p>Aplicació per accelerar les vendes en equips comercials basada en Intel·ligència Artificial.</p>
</div>
<span class="more">+</span>
</div>
</div>
</div>
</div>
This SASS code compiles perfectly well.
The expected working code should be that when I hover the div.portfilioBoxImg, the :before, .more and .portfolioBoxText should gain opacity: 1, but it won't work.
I have other hovers around the site, and they work fine, but this one doesn't.
I tried getting rid of transition, without opacity and adding display none/block, but those works on themselves, what it doesn't works is the hover effect.
Compiled CSS extracted from chrome:
.portfolio .portfolioContainer .portfolioBox .portfolioBoxImg:before
This works perfectly on IE11, Firefox, chrome...
JSFiddle: http://jsfiddle.net/vy5npu3a/
EDIT
I tried a hover within the body with the ::before, and it doesn't works either, but with an anchor a it does. Maybe some elements don't work?

Answer 1

The doctype html was missing. I can swear i had try it before without success, but seems like now works.