Smooth Hover Transition

When hovering over a featured post I have the find out more box appear and the box with the title and text moves up slightly over the image. Now I just want it to have a slow transition rather than appear suddenly. Any Ideas? Thanks

.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 class="find-out-more-btn">Find Out More</div>

Read more here: Smooth Hover Transition

Leave a Reply

Your email address will not be published. Required fields are marked *