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