Multipal Hover Effects Css

                                    

HTML
div class="container">
<div class="main_div">
<p>Exclusive Privileges of your card:</p>
<i class="fa fa-plane fa-3x" aria-hidden="true"></i>
<div class="clearfix"></div>
<p>Exclusive Privileges of your card:</p>

</div>

</div>

CSS

.main_div{ float:left; width:300px; height:300px; border-radius:4px; border:1px solid #C9F; background-color:#99CC66; padding:40px 0px; margin-top:30px;}

.main_div p{ font-size:18px; font-weight:500; font-style:italic; color:#fff; margin:10px 0px; text-align:center;}

.main_div i{color: #990033; list-style: outside none none; margin: 15px 0; text-align: center; width: 100%;}

.main_div:hover{background-color:#0099FF; border:1px solid #663;}

.main_div:hover p{color:#000000;}

.main_div:hover i{color:#fff;}