ホバー移行は機能しません

Question

私は最近プロジェクトに取り組んでおり、divに適用される移行は機能しません。理由は分かりません！ここで

は、あなたはそれが生きて見たいすぎた場合

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

ここ

はそれのためにCodePenのあるHTMLコードCSSコードここ

.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; 
} 

されているhttp://codepen.io/PlatoCode/pen/qadvZV

ありがとうございました

Answer 1

トランジションは、あなたが行うことができる唯一のことは、不透明度

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