0
将鼠标悬停在精选文章上时，我会发现更多方框出现，标题和文字方框在图像上略有移动。现在我只想让它有一个缓慢的过渡，而不是突然出现。有任何想法吗？由于平滑悬停转场
.homepage-news {
\t width: 90%;
\t margin: 0 auto;
}
.content-info {
\t padding: 16px 20px 10px 20px;
margin-top: -7px;
background-color: #ffffff;
border-bottom: 3px solid #c80909;
}
.content-info h3 {
\t font-family: 'Rasa', serif;
\t font-weight: 400;
\t font-size: 1.3rem;
\t text-transform: uppercase;
\t color: #161616;
\t margin: 0;
}
.content-info p {
\t font-family: 'Work Sans', sans-serif;
\t font-weight: 300;
\t font-size: 1rem;
\t color: #161616;
\t margin: 6px 0;
}
.homepage_news {
\t text-decoration: none;
\t color: #161616;
\t width: 31.3%;
\t float: left;
\t background-color: #ffffff;
\t margin: 1%;
\t margin-top: 30px;
}
.homepage_news:hover .content-info{
\t position: relative;
top: -40px;
border-bottom: 0;
height: 50px;
}
.homepage_news:hover .find-out-more-btn {
\t display: block;
\t margin-top: -14px;
padding: 10px 20px;
background-color: #c80909;
font-family: 'Work Sans', sans-serif;
\t font-weight: 300;
color: #ffffff;
position: relative;
top: 40px;
}
.find-out-more-btn {
\t display: none;
}<div class="homepage_news">
\t \t \t \t \t \t \t \t \t \t \t <a href="<?php echo get_the_permalink($latest_news); ?>">
\t \t \t \t \t \t \t \t \t \t \t \t <img src="<?php echo get_the_post_thumbnail_url($latest_news); ?>"
\t \t \t \t \t \t \t \t \t \t \t \t \t alt="<?php echo $latest_news->post_title; ?>">
\t \t \t \t \t \t \t \t \t \t \t \t <div class="content-info">
\t \t \t \t \t \t \t \t \t \t \t \t \t <h3><?php echo $latest_news->post_title; ?></h3>
\t \t \t \t \t \t \t \t \t \t \t \t \t <p><?php echo $latest_news->post_content; ?></p>
\t \t \t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t \t \t \t <div class="find-out-more-btn">Find Out More</div>
\t \t \t \t \t \t \t \t \t \t \t </a>
\t \t \t \t \t \t \t \t \t \t </div>
使用转换。 – TGarrett