<div id="rabbits"><div class="perfume"> ABOUT </div><div onclick="" class="lotion"><p> i scroll text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p></div></div>
<style>
 #rabbits {
 display: inline-block;
 text-align: center;
 width: 300px;
 height: 100px;
 overflow-x: hidden;
 overflow-y: hidden; border:
 dashed 2px #000; background: #f8f8f8;
 transition: all 1s ease-out;
 -o-transition-transition: all 1s ease-out;
 -webkit-transition: all 1s ease-out;
 -moz-transition: all 1s ease-out;
 }
 .perfume {
 font-family: "shrikhand";
 font-size: 25px;
 color: #254B66;
 opacity: 1;
 transition: all 0.5s ease-out;
 -o-transition-transition: all 0.5s ease-out;
 -webkit-transition: all 0.5s ease-out;
 -moz-transition: all 0.5s ease-out;
 }
 #rabbits:hover .perfume {
 margin-top: -40px;
 opacity: 0;
 filter: blur(1px);
 }
 .lotion {
 overflow-x: scroll;
 font-size: .85em;
 margin-top: 15px;
 font-family: mali;
 color: #000;
 opacity: 0;
 transition: all 0.5s ease-out;
 -o-transition-transition: all 0.5s ease-out;
 -webkit-transition: all 0.5s ease-out;
 -moz-transition: all 0.5s ease-out;
 padding: 2.5px;
 overflow-x: hidden;
 height: 50px;
 } #rabbits:hover .lotion {
 opacity: 1;
 overflow-x: hidden;
 height: 97.5px;
 }
 </style>