title: display div on hover with animation
body: <p>I have right side fix position div. I want to display it on hover with animation.</p>
  
  <p>What I want to do that if user hover on the whole div the both <code>span</code> should come out with slide animation. <strong>BUT</strong> right now the scroll is coming and only one <code>span</code> the text(need help) coming out not  <code>?</code> mark coming out.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.need-help-qu{
   background-color:#042E49;
   color:#ffffff;
   padding:0px 10px;
   right:0;
   top:40%;
   font-weight: bold;
   font-size: 20px;
   position:absolute;
   transition: all 0.4s ease-in-out;
   -webkit-transition: all .8s ease;
      -moz-transition: all .8s ease;
      -ms-transition: all .8s ease;
      -o-transition: all .8s ease;
      transition: all .8s ease;
  }
  .need-help{
   background-color:#06507D;
   color:#ffffff;
   right:-150px;
   top:40%;
   position:absolute;
   padding:5px 10px;
   display: inline-block;
   overflow: hidden;
   transition: all 0.4s ease-in-out;
   -webkit-transition: all .8s ease;
      -moz-transition: all .8s ease;
      -ms-transition: all .8s ease;
      -o-transition: all .8s ease;
      transition: all .8s ease;
  }
  .need-help-full:hover .need-help {
   right:0;
   
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="need-help-full"&gt;
   &lt;span class="need-help-qu"&gt;?&lt;/span&gt;
   &lt;span class="need-help text-sm"&gt;NEED A HELP&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>