display div on hover with animation - html

Question

I have right side fix position div. I want to display it on hover with animation.
What I want to do that if user hover on the whole div the both span should come out with slide animation. BUT right now the scroll is coming and only one span the text(need help) coming out not ? mark coming out.
.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;
}
<div class="need-help-full">
<span class="need-help-qu">?</span>
<span class="need-help text-sm">NEED A HELP</span>
</div>

Answer 1

Check this out.
You were trying to move individual divs so it was proving tricky, just bunch the whole content of .need-help-full div together and move it as a whole.
<div class="need-help-full">
<span class="need-help-qu">?</span>
<span class="need-help text-sm">NEED A HELP</span>
</div>
<style>
.need-help-qu{
background-color:#042E49; color:#ffffff; padding:3px 10px 2px;
font-weight: bold;font-size: 20px;float:left;
}
.need-help{
float:left; background-color:#06507D; color:#ffffff;
padding:5px 10px;overflow: hidden;
}
.need-help-full{
right:-123px; position:fixed; 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{right:0;}
</style>
Also I see that you are trying to accomplish this slide in box so mostly it is done using position:fixed; and not using absolute. Since it is generally "fixed" to the page and not to some container element.

Answer 2

You can do following way. Make parent component overflow:hidden. and move need-help-full left/right on hover and give absolute position to need-help-full div.
.need-help-qu {
background-color: #042e49;
color: #ffffff;
display: inline-block;
font-size: 20px;
font-weight: bold;
padding: 3px 10px;
vertical-align: top;
}
.need-help {
background-color: #06507d;
color: #ffffff;
display: inline-block;
overflow: hidden;
padding: 5px 10px;
right: -150px;
}
.need-help-full {
height: 50px;
overflow: hidden;
padding: 5px 10px;
position: absolute;
right: -135px;
top: 40%;
-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 {
right:0;
}
body {
overflow: hidden;
}
<div class="need-help-full">
<span class="need-help-qu">?</span>
<span class="need-help text-sm">NEED A HELP</span>
</div>
Hope it helps.

Answer 3

$(".need-help-qu").hover(function(){
$(".need-help-qu").animate({right: '12px'});
});
body{
overflow-x:hidden;
}
.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 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.need-help-full:hover .need-help {
right:40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="need-help-full">
<span class="need-help-qu">?</span>
<span class="need-help text-sm">NEED A HELP</span>
</div>