ME bug opacity
HTML
<a href="#" class="circCategoria">
<img src="http://i382.photobucket.com/albums/oo262/Don_M85/mazda-rx8-rc-car.jpg" alt="" />
<div class="overlay">
<span class="overlayTexto">
more</span>
<span class="overlayFundo"></span>
</div>
</a>
CSS
.circCategoria{
position: relative;
z-index: 10;
border: solid 8px #00601b;
overflow: hidden;
width: 250px;
height: 250px;
border-radius: 50%;
display: block;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.circCategoria img{
padding: 10px; background: white;
}
.circCategoria .overlay{
filter: alpha(opacity=0); /* internet explorer */
-khtml-opacity: 0; /* khtml, old safari */
-moz-opacity: 0; /* mozilla, netscape */
opacity: 0; /* fx, safari, opera */
-webkit-transition:all 0.5s, background 0.5s;
transition: all 0.5s, background 0.5s;
}
.circCategoria:hover .overlay{
filter: alpha(opacity=100); /* internet explorer */
-khtml-opacity: 1; /* khtml, old safari */
-moz-opacity: 1; /* mozilla, netscape */
opacity: 1; /* fx, safari, opera */
-webkit-transition:all 0.5s, background 0.5s;
transition: all 0.5s, background 0.5s;
}
.circCategoria .overlay .overlayFundo{
position: absolute;
top: 0px;
width: 100%;
height: 100%;
left: 0px;
background: #eee808;
z-index: 5;
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 */
}
.circCategoria .overlayTexto{
position: absolute;
filter: alpha(opacity=100); /* internet explorer */
-khtml-opacity: 1; /* khtml, old safari */
-moz-opacity: 1; /* mozilla, netscape */
opacity: 1; /* fx, safari, opera */
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;
}
.circCategoria .overlayTexto i{
font-size: 40px;
}