Page 1 of 1

How can I use CSS to transition on mouse away?

Posted: Mon Aug 01, 2016 7:15 am
by simonmlewis
This makes a DIV slide in on hover.
But is there a CSS I can add, so that when the mouse leaves the DIV, it slides back rather than just 'jumps' back?

Code: Select all

<style>
.home-phone
{
font-family: arial;
-webkit-border-radius: 17px 0px 0px 17px;
-moz-border-radius: 17px 0px 0px 17px;
border-radius: 17px 0px 0px 17px;
position: absolute;
right: -110px;
padding: 10px;
top: 100px;
width: 140px;
background-color: #333333;
color: #ffffff;
font-size: 1.5em;
text-align: center;
-webkit-box-shadow: 0px 13px 5px -14px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 13px 5px -14px rgba(0,0,0,0.75);
box-shadow: 0px 13px 5px -14px rgba(0,0,0,0.75);
}

.home-phone a
{
color: #ffffff;
}

.home-phone i
{
margin-right: 10px;
}

.home-phone:hover
{
right: 0px;
transition: right 0.5s ease-in;
}
</style>
<div class='home-phone'><a href='#'><i class="fa fa-phone" aria-hidden="true" style='color: #ffffff'></i> &nbsp;Contact</a></div>

Re: How can I use CSS to transition on mouse away?

Posted: Mon Aug 01, 2016 7:26 am
by requinix
Stick the opposite transition in the non-hover definition.

Re: How can I use CSS to transition on mouse away?

Posted: Mon Aug 01, 2016 7:34 am
by simonmlewis
Oh yes. Just set transtion: ease-out 0.2s, and it's brilliant.
I assume I have to set a overflow-x: hidden on the HTML element, as at the moment it's causing a permanent scrolling back along the bottom.