<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="appointment-phone">
<a href="#">
<img src="images/appointment-icon.jpg" all="Astra Health">
<div class="number-move"> 9999223515 </div>
</a>
</div>
.appointment-phone {
position:fixed;
top:42%;
left:0;
z-index:11;
cursor:pointer;
}
.appointment-phone a {
position:relative;
display:block;
}
.appointment-phone a img {
width:40px;
}
.appointment-phone a .number-move {
font-size:14px;
text-transform:uppercase;
position:absolute;
top:0;
right:0px;
width:240px;
height:100%;
text-align:center;
padding:10px;
padding-top:9px;
color:#fff;
z-index:-1;
}
.appointment-phone a .number-move {
background: -webkit-linear-gradient(rgba(84,110,116,1), rgba(152,202,213,1));
background: -moz-linear-gradient(rgba(84,110,116,1), rgba(152,202,213,1));
background: -o-linear-gradient(rgba(84,110,116,1), rgba(152,202,213,1));
background: linear-gradient(rgba(84,110,116,1), rgba(152,202,213,1));
}
.appointment-phone a:hover .number-move {
right:-240px;
}
.appointment-phone a .number-move,
.appointment-phone a:hover .number-move {
-webkit-transition:all ease-out 0.3s;
-moz-transition:all ease-out 0.3s;
-o-transition:all ease-out 0.3s;
transition:all ease-out 0.3s;
}
