Hover-Übergang funktioniert nicht

Question

So habe ich vor kurzem an einem Projekt gearbeitet und der Übergang, den ich auf ein Div anwenden, funktioniert nicht. Keine Ahnung warum! Hier

ist der CSS-Code

.stats .box { 
    background-color: rgba(255, 255, 255,0.07); 
    color: white; 
    padding: 40px 0; 
    text-align: center; 
    transition: 0.7s all ease-out; 
    margin: 20px 0; 

} 

.stats h2 { 
    margin: 25px 0 10px 0; 
    font-size: 35px; 
    font-family: "Montserrat"; 
    color: rgb(255, 255, 255); 
    text-transform: uppercase; 
letter-spacing: 2px; 
    font-weight: 200; 
} 

.stats h4 { 
    font-weight: 100; 
    font-size: 15px; 
} 

.stats .box:hover { 
    background-image: -moz-linear-gradient(102deg, #1ad2fd 11%, #008aff 100%); 
    background-image: -webkit-linear-gradient(102deg, #1ad2fd 11%, #008aff 100%); 
    background-image: -ms-linear-gradient(102deg, #1ad2fd 11%, #008aff 100%); 
    transition: 0.7s all ease-out; 
} 

Hier wird der HTML-Code

<div class="col-sm-6"> 
<div class="box"> 
    <h2>4326</h2> 
    <h4>Lines of Code</h4> 
</div> 

Hier die CodePen dafür ist auch, wenn Sie sehen wollen es leben http://codepen.io/PlatoCode/pen/qadvZV

Danke

Answer 1

Transition unterstützt keine Steigung Animation das einzige, was man mit einer Undurchsichtigkeit tun können

.box { 
 
    background-color: rgba(255, 255, 255, 0.07); 
 
    color: black; 
 
    padding: 40px 0; 
 
    text-align: center; 
 
    transition: 0.7s all ease-out; 
 
    margin: 20px 0; 
 
    position: relative; 
 
} 
 
h2 { 
 
    margin: 25px 0 10px 0; 
 
    font-size: 35px; 
 
    font-family: "Montserrat"; 
 
    text-transform: uppercase; 
 
    letter-spacing: 2px; 
 
    font-weight: 200; 
 
    z-index: 2; 
 
} 
 
h4 { 
 
    font-weight: 100; 
 
    font-size: 15px; 
 
    z-index: 2; 
 
} 
 
.box:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    transition: 0.7s all ease-out; 
 
    opacity: 0; 
 
    background-image: -moz-linear-gradient(102deg, #1ad2fd 11%, #008aff 100%); 
 
    background-image: -webkit-linear-gradient(102deg, #1ad2fd 11%, #008aff 100%); 
 
    background-image: -ms-linear-gradient(102deg, #1ad2fd 11%, #008aff 100%); 
 
    z-index: -1; 
 
} 
 
.box:hover:after { 
 
opacity: 1; 
 
    }

<div class="col-sm-6"> 
 
    <div class="box"> 
 
    <h2>4326</h2> 
 
    <h4>Lines of Code</h4> 
 
    </div>