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