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，它们不会起作用，但它会很好地降级。

平滑的悬停过渡

1 个答案: