0

.category  {
    width:150px;
    height:150px;
    border-radius:50%;
    margin: 20px;
    background-color: #f1f1f1;
    line-height:150px;
    text-align: center;
    cursor: pointer;
    font-size: 20px;
    position: relative;

}

.four span {
    background-color: #ddd;
    line-height:17px;
    position: absolute;
    top:100%;
    left:0;
    right:0;
    padding:20px;
    transition: 1s;
}

.four:hover span {
    bottom:0;
    top:auto;
}
   
   
   
   <div class="category four"><span>FOUR</span></div>

As this example demonstrates, the transition does not work with the auto value set on the top direction.

Can anybody explain why?

Note: You have to hover over the circle.

  • what does *auto* mean to be able to have a transition on it? – Temani Afif Jan 21 '21 at 19:55
  • 1
    Because `auto` is not a numeric value – Paulie_D Jan 21 '21 at 19:56
  • Do it this way instead - https://codepen.io/Paulie-D/pen/ZEpZqRb – Paulie_D Jan 21 '21 at 20:03
  • @TemaniAfif Auto is the default value, so it defaults to its original position. Since the position is known, why does transition not work? –  Jan 21 '21 at 20:04
  • @Paulie_D I already did it. I was just wondering why doesn't transition work on auto. So you're saying it only works on numeric values, which auto is not. That makes sense. Thanks. –  Jan 21 '21 at 20:05

0 Answers0