-1

I have got simple div with this css attached to it

.users_to_c{
    height: 500px;
    width:400px;
    background:rgb(0, 0, 0);
    background-image: url("../img/back.jpg");
    position: absolute;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    overflow: hidden;
    -webkit-transition: 5s;
    -moz-transition: 5s;
    -ms-transition: 5s;
    -o-transition: 5s;
    transition: 5s;
    &:hover{
        overflow: auto;
    }
}

Hover part is working it shows overflow,but it works promptly.

2
  • what is the question??? Commented Jul 27, 2016 at 16:53
  • @VincentRodomista more of a problem.Transition not working Commented Jul 27, 2016 at 16:53

4 Answers 4

1

"overflow" is not a animatable property.

Here is a list of animatable properties:

CSS animated properties

Sign up to request clarification or add additional context in comments.

5 Comments

Oh okay thanks!But to you know how can i animate it like facebook does?
Which feature of Facebook are you referring to?
In chats when you hover the left div it nanimates the scroller
They are not using the default scrollbars that appear when using the CSS "overflow" property. It looks like they're using a custom scrollbar that animates itself appearing/disappearing by using the "opacity" property.
Okay Thanks!I'll see what i can do
0

It actually is not possible to transition the overflow property. This code works fine with qualities such as background: red etc.

Comments

0

There's no option to make a transition on overflow property.

For a more detailed answer, please read this answer: https://stackoverflow.com/a/27905043/1860540

Comments

0

Try this,

<div class="wrap">
  <div class="users_to_c">
    Lorem ipsum dolor sit amet, 
  </div>
</div>

and,

.wrap{
    height: 200px;
    width:400px;
    overflow: hidden; 
}
.users_to_c{ 
    width:400px;
    background:rgb(0, 0, 0);
    background-image: url("../img/back.jpg");
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
   color:red;
   padding: 20px;
   box-sizing: border-box;
}

.wrap:hover{
      overflow-y: auto;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   transition: all 0.5s ease;
  width: 420px;
}

The idea is, create a wrapper and we will animate it by giving extra 20px padding on hover for scrollbar. So that it does not wrap inner text.

http://jsbin.com/qivukeb/edit?html,css,output

Thanks!

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.