Microsoft Edge starts opacity and Transition with bug

Question

I’ve been trying for a long time to solve a bug that only occurs in Microsoft Edge. I need to create a link that has a circle-like border, and within this circle I need you to have an image. When passing the mouse, an animation with opacity should appear in the internal div.

Everything works perfectly in Chrome and Firefox, but only in Microsoft Edge that happens the problem. It already starts as if I had the mouse over the elements. Apparently, it is considering only the opacity of the last div, and not the external.

The code is on this link: https://jsfiddle.net/fsf4ehsb/1/

Could anyone tell how to get around this problem?

Answer 1

Common error when working with Edge, he loaded the . sheep World because he is free and without opacity, and he does not care for the former, the way of tidying up is so:

.circCategoria .overlay .overlayFundo {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  left: 0px;
  background: #eee808;
  z-index: 5;
  filter: alpha(opacity=0);
  /* internet explorer */
  -khtml-opacity: 0;
  /* khtml, old safari */
  -moz-opacity: 0;
  /* mozilla, netscape */
  opacity: 0;
  /* fx, safari, opera */
  transition: all 0.5s, background 0.5s;
}

.circCategoria .overlayTexto {
  position: absolute;
  transition: all 0.5s, background 0.5s;
  font-size: 21px;
  font-weight: bold;
  line-height: 22px;
  color: #01611b;
  width: 100%;
  top: 50%;
  margin-top: -30px;
  left: 0px;
  text-align: center;
  z-index: 6;
  filter: alpha(opacity=0);
  /* internet explorer */
  -khtml-opacity: 0;
  /* khtml, old safari */
  -moz-opacity: 0;
  /* mozilla, netscape */
  opacity: 0;
  /* fx, safari, opera */
}

.circCategoria:hover .overlayTexto, .circCategoria .overlay:hover .overlayFundo {
  filter: alpha(opacity=70);
  /* internet explorer */
  -khtml-opacity: 0.7;
  /* khtml, old safari */
  -moz-opacity: 0.7;
  /* mozilla, netscape */
  opacity: 0.7;
  /* fx, safari, opera */
}

Jsfiddle: https://jsfiddle.net/rapa09/mv90rvrp/2/