css transition stopped working

Problem

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;
}
Problem courtesy of: user3353748

Solution

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

Solution courtesy of: progysm

Discussion

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.

Discussion courtesy of: Lucas Urdiales Moreira

This recipe can be found in it's original form on Stack Over Flow.