Übergangseffekt zum Div-Rollover hinzufügen

Question

Ich habe den folgenden HTML- und CSS-Code eingerichtet, um ein Div zu erstellen, das den Inhalt bei Hover ändert. Ich möchte einen einfachen Übergang zum Schweben wie folgt hinzuzufügen:

transition: .5s ease;

Aber ich habe keinen Erfolg bekommen sie zu arbeiten.

Mein html ist wie folgt:

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

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

Das Layout habe ich erstellt funktioniert gut, aber ich möchte einige Übergang zum Umsatz der Einzahlung fügen Sie den Hover-Effekt zu mildern.

Ich bin ein Neuling, so dass jede Hilfe, die jemand geben kann, sehr geschätzt wird.

Ich sollte erwähnen, dass ich drei dieser Boxen Seite an Seite sitzen habe, indem ich die Klasse grid-33 zur Top-Box div hinzufüge. Ich habe den ganzen Code hier nicht eingefügt, weil er ziemlich groß ist.

ich einen Übergang auf schweben erreicht habe folgendes 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; 
} 

aber das Problem ist nun, dass der Inhalt unter der Top-Box nach unten gedrückt wird (wenn nicht schwebte) in Form von Tabletten oder Telefon Ansicht. Alles funktioniert wie es sollte im Vollbildmodus.

Answer 1

Sie können keine Transition für die Anzeigeeigenschaft verwenden. Sie sollten Opazität oder etwas anderes wie in diesem Beispiel verwenden:

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