Así que tengo esta tarjeta de artículo, y cuando hago la transición del atributo superior de mi div de información, la transición es de hecho 0.3s y suave , pero la descripción aparece de repente y me gustaría cambiar esto, alguna idea de por qué sucede esto y cómo ¿arreglarlo?
.article-card{ background-image: url(" ") -webkit-box-shadow: 0px 0px 20px 1px #919191; box-shadow: 0px 0px 20px 1px #919191; width: 30vh; height: 40vh; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center; } .article-card-info{ position: relative; top: 18vh; height: 10vh; background-color: white; } .article-card-title{ color: #1a2434; text-align: center; padding-top: 2vh; font-size: 1rem } .article-card-description{ display: none; position: relative; top: 10vh; text-align: center; font-size: 0.6rem; font-family: 'Zona Pro Thin'; font-weight: 1000; color: #1a2434; margin: 2px; } .article-card:hover .article-card-info{ transition: 0.3s ease; height: 15vh; top:13vh; } .article-card:hover .article-card-description{ display: block; top: 1vh; transition: 0.3s ease; } <div class="article-card"> <div class="article-card-info"> <p class="article-card-title"> Title</p> <p class="article-card-description"> Description </p> </div> </div>Puede usar la propiedad de opacity para que la descripción aparezca sin problemas.
.article-card{ background-image: url(" ") -webkit-box-shadow: 0px 0px 20px 1px #919191; box-shadow: 0px 0px 20px 1px #919191; width: 30vh; height: 40vh; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center; } .article-card-info{ position: relative; top: 18vh; height: 10vh; background-color: white; } .article-card-title{ color: #1a2434; text-align: center; padding-top: 2vh; font-size: 1rem } .article-card-description{ position: relative; top: 10vh; text-align: center; font-size: 0.6rem; font-family: 'Zona Pro Thin'; font-weight: 1000; color: #1a2434; margin: 2px; opacity: 0; transition: 0.3s ease; } .article-card:hover .article-card-info{ transition: 0.3s ease; height: 15vh; top:13vh; } .article-card:hover .article-card-description{ top: 1vh; opacity: 1; } <div class="article-card"> <div class="article-card-info"> <p class="article-card-title"> Title</p> <p class="article-card-description"> Description </p> </div> </div>