Панель смайлов как в вк

<div id="msgbox" class="message-box">
<textarea name="text0" class=text rows=2 maxlength=500 autocomplete="off" onkeydown="sendCtrl(event);" onkeypress="if(enabletrans==1) return autotrans(this,event);"></textarea>
<div class="smile-button" tabindex="1">
<div class="smile-box">
<div class="smile-box-wrapper"></div>
</div>
<div class="smile-close" tabindex="2"></div>
<div class="smile-open"></div>
</div>
</div>

.message-box {
position: relative;
width: 260px;
height: 35px;
display: inline-block;
}
.message-box .smile-button {
position: absolute;
width: 20px;
height: 20px;
top: 10px;
right: 10px;
outline: 0;
}
.message-box .smile-button .smile-open, .message-box .smile-button .smile-close {
background: url('img/smilebox.png') no-repeat -2px -26px;
position: absolute;
opacity: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;

-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);

-webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease;
-moz-transition: -moz-transform 0.3s ease, opacity 0.3s ease;
-ms-transition: -ms-transform 0.3s ease, opacity 0.3s ease;
-o-transition: -o-transform 0.3s ease, opacity 0.3s ease;
transition: transform 0.3s ease, opacity 0.3s ease;

outline: 0;
}
.message-box .smile-button .smile-close {
opacity: 0;
background-position: -2px -2px;
}
.message-box .smile-button:focus .smile-close {
z-index: 1;
opacity: 1;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.message-box .smile-button:focus .smile-open {
opacity: 0;
}
.message-box textarea {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
resize: none;
outline: 0;
line-height: normal;
}
.message-box .smile-button .smile-box {
display: none;
position: absolute;
opacity: 0;
bottom: 100%;
left: -90px;
color: #fff;
border-radius: 5px;
width: 200px;
height: 100px;
background: #000;
margin-bottom: 10px;
outline: 0;
-webkit-transition: opacity 0.3s ease, margin-bottom 0.3s ease;
-moz-transition: opacity 0.3s ease, margin-bottom 0.3s ease;
-ms-transition: opacity 0.3s ease, margin-bottom 0.3s ease;
-o-transition: opacity 0.3s ease, margin-bottom 0.3s ease;
transition: opacity 0.3s ease, margin-bottom 0.3s ease;
}
.message-box .smile-button .smile-box:after {
content: ' ';
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
border-top: 5px solid #000;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 0;
}
.message-box:hover .smile-button .smile-box {display: block;}
.message-box .smile-button:focus .smile-box {
display: block;
opacity: 0.8;
margin-bottom: 5px;
}
.message-box .smile-button .smile-box .smile-box-wrapper {padding: 10px;}