div button to slide in and off screen (depending user's mouse) - html

Question

I have a div with class .side-buttons. This div will slide in and off when user's mouse hover over the div. I was wondering how can I hide the div completely and say when the user's mouse is in the area it would slide in?
I tried getting the off the screen but that wouldn't work as it would only work when my mouse on the div
This is my website - http://smati.ca/test/index.html (Don't click continue but instead click around the popup modal to get off the modal overlay. There you can see the div in action)
Here's my css code :
.side-buttons {
position: absolute;
right: -100px;
top: 55%;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.side-buttons:hover {
right: 0px;
}
.side-buttons a {
display: block;
background: linear-gradient(to bottom, #33a9c3 15%, #b1ccbb 100%);
border-radius: 0;
box-shadow: none;
border: none;
color: #f5f5f5;
font-size: 22px;
font-family: "Lato", sans-serif;
}
.side-buttons a small {
font-size: 16px;
}
.side-buttons a:hover,
.side-buttons a:focus,
.side-buttons a:active {
background: linear-gradient(to bottom, #33a9c3 15%, #b1ccbb 100%);
color: #f5f5f5;
}
.side-buttons a:nth-child(2) {
background: linear-gradient(to left, #de3c88 15%, #f0a473 100%);
}

Answer 1

You could try something like this too i.e wrapping it by a div and performing that slide-in and slide-out effect on child div as below,
#bx{
width:210px;
height:120px;
position:absolute;
top:40%;
right:0;
overflow:hidden;
border:1px solid rgba(0,0,0,0.1);
}
#bx > .b{
position:absolute;
width:200px;
height:120px;
background:blue;
right:-200px;
transition:0.6s ease;
}
#bx:hover > .b{
right:0px;
}
<div id="bx">
<div class="b">
</div>
</div>

Answer 2

You can use a pseudo element, like this
html, body {
margin: 0;
}
div {
position: absolute;
width: 0;
right: 0;
height: 150px;
background: red;
transition: width 0.5s;
}
div::after {
content: '';
position: absolute;
width: 30px;
right: 100%;
height: 100%;
transition: width 0s 0.5s;
border: 1px dotted gray; /* added for demo purpose */
}
div:hover {
width: 100px;
transition: width 0.5s;
}
div:hover::after {
width: 0;
transition: width 0.5s;
}
<div>
</div>
Here is another option, that might be easier to add to your existing solution
html, body {
margin: 0;
}
.content {
width: 170px;
padding: 50px 30px;
background: lightgray;
}
.wrapper {
position: absolute;
right: 0;
width: 0;
padding-left: 30px;
overflow: hidden;
transition: width 0.5s, padding-left 0s 0.5s;
border: 1px dotted gray; /* added for demo purpose */
}
.wrapper:hover {
width: 200px;
padding-left: 0;
transition: width 0.5s, padding-left 0.5s;
}
<div class="wrapper">
<div class="content">
Some text and/or images<br>
or anything else needed
</div>
</div>