CODEWITHSUNDEEP
css
Noqrax
Noqrax

Reputation: 1169

Transition property doent works when initial value used

I want to create some animated menu, where you hover over image and see description od it, but some problems occured.

There is my code:

body{
  text-align:center;
}
div{
  display:inline-block;
  overflow:hidden;
  width:80px;
  height:80px;
  transition:0.5s;
  font-size:20px;
}
div:hover{
  width:initial;
  overflow:visible;
  transition:2s;
  background-color:black;
  color:white;
}
img{
  vertical-align:middle;
}
<body>
  <div>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Test.png"/> Some text</span>
  </div>
  <div>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Test.png"/> Some text</span>
  </div>
  <div>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Test.png"/> Some text</span>
  </div>
</body>

Upvotes: 0

Views: 66

Answers (1)

Paulie_D
Paulie_D

Reputation: 115061

initial is like auto...you can't transition to it.

You could use max-width instead.

Also. note that overflow cannot be transitioned so you'll have that issue too.

body{
  text-align:center;
}
div{
  display:inline-block;
  overflow:hidden;
  max-width:80px;
  height:80px;
  transition:0.5s;
  font-size:20px;
}
div:hover{
  max-width:100%;
  overflow:visible;
  transition:2s;
  background-color:black;
  color:white;
}
img{
  vertical-align:middle;
}
<body>
  <div>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Test.png"/> Some text</span>
  </div>
  <div>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Test.png"/> Some text</span>
  </div>
  <div>
    <span><img src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Test.png"/> Some text</span>
  </div>
</body>

Upvotes: 1

Related Questions