CODEWITHSUNDEEP
css
mayumi de leon
mayumi de leon

Reputation: 1

smooth fade out transition not working

i'm new to this whole css thing and i used a :hover transition on my blog theme. When i hover on it, it's smooth but when i remove the mouse, the fade out transition is not smooth anymore. Here is my code:

#box{
   background-color:#333;
   width:200px;
   color: #fff;
   border: 3px solid #e6e6e6;
   margin-top:200px;
   height: 70px;
   margin-left:50px;
   position:fixed;
   padding:20px 10px 20px 10px;
   text-align:center;}

#box:hover{
   height: 200px;
   -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;}

my blog preview is here

Upvotes: 0

Views: 1667

Answers (1)

s4nji
s4nji

Reputation: 455

You should put the transition property in #box instead of #box:hover, like so:

#box{
   background-color:#333;
   width:200px;
   color: #fff;
   border: 3px solid #e6e6e6;
   height: 70px;
   margin-left:50px;
   position:fixed;
   padding:20px 10px 20px 10px;
   text-align:center;
   -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;}

#box:hover{
   height: 200px;}
<div id="box">Text</div>

Upvotes: 2

Related Questions