Microsoft Edge starts opacity and transition with bug

Question

Microsoft Edge starts opacity and transition with bug

Navigation

#1 by (1 votes)

1

I've been trying to resolve a bug that only occurs on Microsoft Edge. I need to create a link that has a border in the shape of a circle, and within that circle I need an image. When passing the mouse, an animation with opacity in the internal div should appear.

Everything works perfectly with Chrome and Firefox, but it's only on Microsoft Edge that the problem happens. It already starts as if I had with the mouse on the elements. It seems he is only considering the opacity of the last div, not the outer ones.

The code is at this link: link

Could anyone tell me how to get around this problem?

css3 microsoft-edge opacity

asked by anonymous 15.04.2016 / 00:56

1 answer

Problem with special php characters Django Api: How to create a view that does reset Password?

score 1 · Accepted Answer

Common error at the time of working with Edge, it loaded the .ovelayFound because it is free and without opacity, and it does not connect to the previous one, the way to sort it is like this:

.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: link