Transition on div rollover

Tom

I am developing locally so cannot provide link.

I have designed some complex boxes using GPs onboard grid system.

Everything looks nice and functions exactly as it should in all browsers.

I want to add the following transition when hover over the top box (same as I use on my buttons):

transition: all 0.5s ease;

However all of my attempts to add this transition to my existing code did not work.

The html I am using for the boxes is as follows:

<div class="top-box grid-33 ">
<div style="text-align: center;">
<i class="fa fa-laptop round-background"><!-- icon --></i>
<hr class="boxline" />
<p class="top-box-text">HEADING ONE</p>
</div>
<div class="bottom-box">
<p class="box-header">HEADING ONE</p>
<ul class="box-icons">
 	<li>STUFF</li>
 	<li>MORE STUFF</li>
 	<li>EVEN MORE STUFF</li>
</ul>
<div class="box-button-wrapper"><a class="button" href="https://mysite.com/mypage/">CALL TO ACTION</a></div>
</div>
</div>

<div class="top-box grid-33 ">
<div style="text-align: center;">
<i class="fa fa-laptop round-background"><!-- icon --></i>
<hr class="boxline" />
<p class="top-box-text">HEADING TWO</p>
</div>
<div class="bottom-box">
<p class="box-header">HEADING TWO</p>
<ul class="box-icons">
 	<li>STUFF</li>
 	<li>MORE STUFF</li>
 	<li>EVEN MORE STUFF</li>
</ul>
<div class="box-button-wrapper"><a class="button" href="https://mysite.com/mypage/">CALL TO ACTION</a></div>
</div>
</div>

<div class="top-box grid-33 ">
<div style="text-align: center;">
<i class="fa fa-laptop round-background"><!-- icon --></i>
<hr class="boxline" />
<p class="top-box-text">HEADING THREE</p>
</div>
<div class="bottom-box">
<p class="box-header">HEADING THREE</p>
<ul class="box-icons">
 	<li>STUFF</li>
 	<li>MORE STUFF</li>
 	<li>EVEN MORE STUFF</li>
</ul>
<div class="box-button-wrapper"><a class="button" href="https://mysite.com/mypage/">CALL TO ACTION</a></div>
</div>
</div>

And the CSS is as follows:

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

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

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

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

.top-box {
    border: 5px solid #fff;
    box-shadow: 0 0 0 1px #000 inset;
    color:#000; /* need this to remove blue link color from GP settings */
    height:440px;
    box-sizing:border-box;
    background:#CEA453;
}

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

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

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

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

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

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

.box-button-wrapper {
    text-align:right;
    margin: 0 25px 10px 0;
}

Thanks in advance for your kind assistance.

Regards

Max