css transition stopped working - html

Question

After changing styles to some inner divs hover transition stopped working. To see if that was the cause, i removed new styling, but the problem stayed. Can't understand why.
Live link is here
.com/
It's these blocks on the left of the slider
html code (though it's the same with the one that was working just fine before)
<div class="slidersidehover slidersideheight" id="sliderside1">
<div id="sliderside1title"></div>
<div id="sliderside1content"></div>
</div>
<a href="" target="_blank">
<div class="slidersidehover slidersideheight" id="sliderside2">
<p id="sliderside2txt"></p>
<div id="sliderside2bg"></div>
</div></a>
<a href="" target="_blank">
<div class="slidersidehover slidersideheight" id="sliderside3">
<p id="sliderside3txt"></p>
<div id="sliderside3bg"></div>
</div></a>
and css
.slidersidehover {
background-color:black !important;
transition:0.3s;
-ms-transition:0.3s;
-o-transition:0.3s;
-moz-transition:0.3s;
-webkit-transition:0.3s;
}
.slidersidehover:hover {
opacity:0.5;
}

Answer 1

try to remove html comment <!--slider--> in your style.css
and use css comment: /* slider */

Answer 2

As far as I understand transitions only happen if you declare the property on both the active state and rest state.
.slidersidehover {
opacity:1;
background-color:black !important;
transition:0.3s;
-ms-transition:0.3s;
-o-transition:0.3s;
-moz-transition:0.3s;
-webkit-transition:0.3s;
}
.slidersidehover:hover {
opacity:0.5;
transition:0.3s;
-ms-transition:0.3s;
-o-transition:0.3s;
-moz-transition:0.3s;
-webkit-transition:0.3s;
}
I am not sure exactly what effect you are going for but for explanation purposes I set the opacity to 1 on the rest state and then opacity to 0.5 on your hover. That should fix the issue.