Divロールオーバーへのトランジション効果の追加

Question

次のhtmlとcssを設定して、ホバー上のコンテンツを変更するdivを作成しました。

transition: .5s ease;

をしかし、私はそれが動作するようになって何の成功を持っていない午前：次のように私にはホバーにシンプルなトランジションを追加します。次のように

私のHTMLは次のとおりです。

<div class="top-box"> 
<div style="text-align: center;"> 
<i class="fa fa-laptop round-background"><!-- icon --></i> 
<hr class="boxline" /> 
<p class="top-box-text">MY SERVICES</p> 
</div> 

<div class="bottom-box"> 
<p class="box-header">CONTENT DEVELOPMENT</p> 
<ul class="box-icons"> 
<li>SERVICE</li> 
<li>SERVICE</li> 
<li>SERVICE</li> 
<li><a class="box-link" href="#">READ MORE</a></li> 
</ul> 
</div> 
</div> 

マイCSS：

.bottom-box, .top-box:hover>div { 
    display: none; 
} 

.top-box:hover>.bottom-box { 
    display: block; 
} 

.top-box { 
    border: 5px solid #fff; 
    box-shadow: 0 0 0 1px #000 inset; 
    color:#000; 
    height:445px; 
    box-sizing:border-box; 
    background:#CEA453; 
} 

.bottom-box { 
    border: 5px solid #fff; 
    box-shadow: 0 0 0 1px #000 inset; 
    margin:-5px -15px; 
    background:#fff; 
    height:445px; 
    box-sizing:border-box; 
} 

.top-box-text { 
    font-weight:600; 
} 

.boxline { 
    display: block; 
    border-top: 1px solid #000; 
    margin: 1em 3em; 
    padding: 0; 
} 

.round-background { 
    background: #960; 
    border-radius: 100%; 
    border: 8px solid #fff; 
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.40); 
    color: #fff; 
    font-size: 60px !Important; 
    padding: 32px; 
    text-align: center; 
    vertical-align: middle; 
    display: inline-block; 
    height: 140px; 
    width:140px; 
    margin:60px 0 20px; 
    box-sizing:border-box; 
} 

.box-header { 
    background:#960; 
    text-align:center; 
    padding:1em 0; 
    color:#fff; 
    font-weight:600; 
} 

.box-icons, .box-icons li { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
} 

.box-icons li { 
    margin: 1em; 
    margin-left: 3em; 
    line-height:1em; 
    position: relative; 
} 

.box-icons li:before { 
    content: '\f067'; /* fa-plus */ 
    font-family: 'FontAwesome'; 
    float: left; 
    margin-left: -1.5em; 
    color: #CEA453; 
} 

.box-link { 
    color:#960; 
    font-weight:600; 
} 

.box-link:active, .box-link:hover { 
    color:#CEA453; 
} 

私が作成したレイアウトが正常に動作しますが、私はホバー効果を和らげるためにロールオーバーにいくつかのトランジションを追加します。

私は初心者です。だから助けてくれれば幸いです。

トップボックスのdivにgrid-33クラスを追加することで、これらの3つのボックスが並んで座っていることに言及する必要があります。それはかなり大きいので私はここにコードのすべてを貼り付けませんでした。私は、以下のCSSを使用してホバーの移行を達成した

：

問題は、タブレットまたは電話ビューで（ホバリングないとき）押下されたトップボックスの下にそのコンテンツが今あるしかし

.bottom-box, .top-box:hover>div { 
     opacity: 0; 
     height: 0; 
     visibility: hidden; 
     transition: opacity 0.5s ease; 
} 

.top-box:hover>.bottom-box { 
    opacity: 1; 
     height: auto; 
     visibility: visible; 
     transition: opacity 0.5s ease; 
} 

。すべてがフルスクリーンで動作するはずです。

Answer 1

表示プロパティでトランジションを使用することはできません。あなたは、この例のように、不透明度または何か他のものを使用する必要があります。

.bottom-box, .top-box:hover>div { 
 
    position: absolute; 
 
    top: 0; 
 
    left:0; 
 
    right: 0; 
 
    transition: opacity 0.5s linear; 
 
    opacity: 0; 
 
} 
 

 
.top-box:hover>.bottom-box { 
 
    top: 0; 
 
    left:0; 
 
    right: 0; 
 
    position: absolute; 
 
    transition: opacity 0.5s linear; 
 
    opacity: 1; 
 
} 
 

 
.top-box { 
 
    border: 5px solid #fff; 
 
    box-shadow: 0 0 0 1px #000 inset; 
 
    color:#000; 
 
    height:445px; 
 
    box-sizing:border-box; 
 
    background:#CEA453; 
 
} 
 

 
.bottom-box { 
 
    border: 5px solid #fff; 
 
    box-shadow: 0 0 0 1px #000 inset; 
 
    margin:-5px -15px; 
 
    background:#fff; 
 
    height:445px; 
 
    box-sizing:border-box; 
 
} 
 

 
.top-box-text { 
 
    font-weight:600; 
 
} 
 

 
.boxline { 
 
    display: block; 
 
    border-top: 1px solid #000; 
 
    margin: 1em 3em; 
 
    padding: 0; 
 
} 
 

 
.round-background { 
 
    background: #960; 
 
    border-radius: 100%; 
 
    border: 8px solid #fff; 
 
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.40); 
 
    color: #fff; 
 
    font-size: 60px !Important; 
 
    padding: 32px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
    height: 140px; 
 
    width:140px; 
 
    margin:60px 0 20px; 
 
    box-sizing:border-box; 
 
} 
 

 
.box-header { 
 
    background:#960; 
 
    text-align:center; 
 
    padding:1em 0; 
 
    color:#fff; 
 
    font-weight:600; 
 
} 
 

 
.box-icons, .box-icons li { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
} 
 

 
.box-icons li { 
 
    margin: 1em; 
 
    margin-left: 3em; 
 
    line-height:1em; 
 
    position: relative; 
 
} 
 

 
.box-icons li:before { 
 
    content: '\f067'; /* fa-plus */ 
 
    font-family: 'FontAwesome'; 
 
    float: left; 
 
    margin-left: -1.5em; 
 
    color: #CEA453; 
 
} 
 

 
.box-link { 
 
    color:#960; 
 
    font-weight:600; 
 
} 
 

 
.box-link:active, .box-link:hover { 
 
    color:#CEA453; 
 
}

<div class="top-box"> 
 
    <div style="text-align: center;"> 
 
    <i class="fa fa-laptop round-background"><!-- icon --></i> 
 
    <hr class="boxline" /> 
 
    <p class="top-box-text">MY SERVICES</p> 
 
</div> 
 

 
<div class="bottom-box"> 
 
    <p class="box-header">CONTENT DEVELOPMENT</p> 
 
    <ul class="box-icons"> 
 
     <li>SERVICE</li> 
 
     <li>SERVICE</li> 
 
     <li>SERVICE</li> 
 
     <li><a class="box-link" href="#">READ MORE</a></li> 
 
    </ul> 
 
</div>