slideout-css-only

slideout-css-only

<style type="text/css">
#slideout {
  right: 0;
  z-index:9001;
}
#slideout_inner {
  right: -274px;
  background-color:#f4f4f4;
  width: 274px;
  text-align:center;
}
#slideout, #slideout_inner{
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  position: fixed;
  top: 102px;
  height: 339px;
}
#slideout:hover {
  right: 274px;
}
#slideout:hover #slideout_inner {
  right: 0;
}
#slideout:focus {
  right: 274px;
}
#slideout:focus #slideout_inner {
  right: 0;
}
/* Optional */
@media (max-width: 991px){
  #slideout, #slideout_inner {
    top:unset;
    bottom:0;
  }
}
</style>
<div id="slideout" style="margin-bottom:0">
  <img src="NeatImage.exe" alt="" />
  <div id="slideout_inner">
    <!-- Slide out content -->
  </div>
</div>