CODEWITHSUNDEEP
htmlcsscss-transitions
pb.
pb.

Reputation: 341

transition ease-in-out; is not working

I am trying to use simple transiton, but I don't understand why it is not working. Could you help me? I put transition: ease-in-out; in container...

my code:

.container{
    width:250px;
    height:300px;
    background:#00f;
    position:relative;
    transition: ease-in-out;
}

.show{
    display: none;
    position:absolute;
    bottom:0;
    height:50%;
    width:100%;
    color:#000;
    text-indent:5px;
    background:rgba(255,255,255,.5);
}

.container:hover > .show{
    display:block;
}

http://jsfiddle.net/mAzsL/44/

I use this as example: http://jsfiddle.net/n7Ne9/53/

UPDATE: My aim was to get effect which is called 'fade in a box' - I wasn't precise, sorry.

Upvotes: 3

Views: 14601

Answers (1)

Naren Murali
Naren Murali

Reputation: 56803

Update:

On new requirements, the transition effect needs to be different, please refer the below snippet.

.container {
  width: 250px;
  height: 300px;
  background: #00f;
  position: relative;
}

.show {
  position: absolute;
  opacity:0;
  height:30%;
  bottom:0px;
  left:0px;
  right:0px;
  color: #000;
  text-indent: 5px;
  background: rgba(255, 255, 255, .5);
  transition: opacity 0.5s ease-in-out;
}

.container:hover>.show {
  opacity:1;
}
<div class="container">
  <div class="show">Lorem </div>
</div>

Old Answer:

The problem is transition property cannot be applied to the CSS property display:none, the workaround for this is to set the height to 0px initially, a problem you will face is that the text will still be visible on the screen. For this overflowing text to be hidden, use the CSS class overflow:hidden which will hide the content which is outside the element. Also instead of using transition on the parent element, use it directly on the element itself. Refer the below class.

.show{
    position:absolute;
    overflow:hidden;
    bottom:0;
    height:0px;
    width:100%;
    color:#000;
    text-indent:5px;
    background:rgba(255,255,255,.5);
    transition: height 1s ease-in-out;
}

The transition property should be as follows.

transition: height 1s ease-in-out;

First mention which property should have the transition effect. Then duration of the transition, then whether ease-in or some other setting.

Then on hover, set the original height. The transition will be seen.

.container:hover > .show{
    height:50%;
}


.container {
  width: 250px;
  height: 300px;
  background: #00f;
  position: relative;
}

.show {
  position: absolute;
  overflow: hidden;
  bottom: 0;
  height: 0px;
  width: 100%;
  color: #000;
  text-indent: 5px;
  background: rgba(255, 255, 255, .5);
  transition: height 1s ease-in-out;
}

.container:hover>.show {
  height: 50%;
}
<div class="container">
  <div class="show">Lorem </div>
</div>

Upvotes: 3

Related Questions