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>