ボックスのカラーフロー効果
HTML
<div class="col-md-3 mt-3 mt-md-3">
<a class="card-item" href="<?php the_permalink(); ?>">
<a>
<div class="card-effect">
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/common/noimage.jpg" alt="no image">
<div class="card-ttl">
<h6></h6>
</div>
<div class="card-text">
<p></p>
</div>
</div>
</a>CSS
.card-effect {
position: relative;
overflow: hidden;
}
.card-effect::after {
content: "";
position: absolute;
top: -100%;
left: 0;
background-color: gold;
width: 100%;
height: 100%;
opacity: 0;
transition: all 0.35s ease;
z-index: -1;
}
.card-effect:hover::after {
opacity: 1;
top: 0;
}Javascript
入力無し
投稿タイプ