PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Sun Jun 17, 2018 7:19 pm

All times are UTC - 5 hours




Post new topic Reply to topic  [ 3 posts ] 
Author Message
PostPosted: Mon Aug 01, 2016 7:15 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4417
Location: United Kingdom
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?
Syntax: [ Download ] [ Hide ]
<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>
 

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Mon Aug 01, 2016 7:26 am 
Offline
Spammer :|
User avatar

Joined: Wed Oct 15, 2008 2:35 am
Posts: 6617
Location: WA, USA
Stick the opposite transition in the non-hover definition.


Top
 Profile  
 
PostPosted: Mon Aug 01, 2016 7:34 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4417
Location: United Kingdom
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.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 3 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group