Enfold Image Overlay Opacity with CSS

Thangs Devin,
i’ve try, but with this i lost the fading animation, from 0 to 1.
I need to have opacity 1 for the orange circle (.image-overlay-inside), only at the end of the animation, but at the beginnig of the animation both opacity (image-overlay and image-overlay-inside) set to 0, in order to have a fade-in animation.

Hi!
thanks for the reply. I don’t think is so complicated, only i don’t understand why i can’t override the opacity of the element with the one write in css inside my keyframes animation.

.image-overlay {
overflow: hidden;
}

.image-overlay .image-overlay-inside::before {
font-size: 30px;
}

@-webkit-keyframes avia_pop_small {
  0%   { -webkit-transform: scale(6); opacity:(0);}
  100% { -webkit-transform: scale(1);opacity:(1); }
}
@-moz-keyframes avia_pop_small {
  0%   { -moz-transform: scale(6);opacity:(0);}
  100% { -moz-transform: scale(1); opacity:(1);}
}
@-o-keyframes avia_pop_small {
  0%   { -o-transform: scale(6); opacity:(0);}
  100% { -o-transform: scale(1); opacity:(1);}
}
@keyframes avia_pop_small {
  0%   { transform: scale(6); opacity:(0);}
  100% { transform: scale(1); opacity:(1);}
}

a:hover .image-overlay .image-overlay-inside {
-webkit-animation: avia_pop_small 0.35s 1 cubic-bezier(0.000, 0.980, 0.440, 1.100)!important;
-moz-animation: avia_pop_small 0.35s 1 cubic-bezier(0.000, 0.980, 0.440, 1.100)!important;
-o-animation: avia_pop_small 0.35s 1 cubic-bezier(0.000, 0.980, 0.440, 1.100)!important;
animation: avia_pop_small 0.35s 1 cubic-bezier(0.000, 0.980, 0.440, 1.100)!important;
}