平滑悬停过渡

Question

当将鼠标悬停在精选帖子上时，我会出现"了解更多"框，并且带有标题和文本的框在图像上略微向上移动。现在我只希望它有一个缓慢的过渡，而不是突然出现。有什么想法吗？谢谢

.homepage-news {
	width: 90%;
	margin: 0 auto;
}
.content-info {
	padding: 16px 20px 10px 20px;
    margin-top: -7px;
    background-color: #ffffff;
    border-bottom: 3px solid #c80909;
}
.content-info h3 {
	font-family: 'Rasa', serif;
	font-weight: 400;
	font-size: 1.3rem;
	text-transform: uppercase;
	color: #161616;
	margin: 0;
}
.content-info p {
	font-family: 'Work Sans', sans-serif;
	font-weight: 300;
	font-size: 1rem;
	color: #161616;
	margin: 6px 0;
}
.homepage_news {
	text-decoration: none;
	color: #161616;
	width: 31.3%;
	float: left;
	background-color: #ffffff;
	margin: 1%;
	margin-top: 30px;
}
.homepage_news:hover .content-info{
	position: relative;
    top: -40px;
    border-bottom: 0;
    height: 50px;
}
.homepage_news:hover .find-out-more-btn {
	display: block;
	margin-top: -14px;
    padding: 10px 20px;
    background-color: #c80909;
    font-family: 'Work Sans', sans-serif;
	font-weight: 300;
    color: #ffffff;
    position: relative;
    top: 40px;
}
 .find-out-more-btn {
	display: none;
}

<div class="homepage_news">
											<a href="<?php echo get_the_permalink($latest_news); ?>">
												<img src="<?php echo get_the_post_thumbnail_url($latest_news); ?>"
												 	 alt="<?php echo $latest_news->post_title; ?>">
												<div class="content-info">
													<h3><?php echo $latest_news->post_title; ?></h3>
													<p><?php echo $latest_news->post_content; ?></p>
												</div>
												<div class="find-out-more-btn">Find Out More</div>
											</a>
										</div>

Answer 1

将其添加到样式表中可能会使您大部分时间到达那里：

.content-info, .find-out-more-btn{
  transition: 0.4s all;
}

您可以将转换的0.4s时间调整为所需的任何数字。

如果您需要支持IE8/9，这些将不起作用，但它会很好地降级。