<div class="card-15__bg"><a class="card-15" href="#">
<div class="card-15__img"><img src="https://picsum.photos/id/1000/400/400" width="400" height="400" /><span class="card-15__img-border"></span><span class="card-15__img-border"></span></div>
<div class="card-15__content">
<h3 class="card-15__heading">見出しが入ります見出しが入ります見出しが入ります</h3>
<p class="card-15__text"><span class="card-15__category">カテゴリー</span><span class="card-15__date">2021/00/00</span></p>
</div>
</a></div>
.card-15__bg
a.card-15(href=link)
.card-15__img
img(src=img, width=400, height=400)
span.card-15__img-border
span.card-15__img-border
.card-15__content
h3.card-15__heading #{ heading }
p.card-15__text
span.card-15__category #{ category }
span.card-15__date #{ date }
{
"link": "#",
"img": "https://picsum.photos/id/1000/400/400",
"heading": "見出しが入ります見出しが入ります見出しが入ります",
"category": "カテゴリー",
"date": "2021/00/00"
}
$BLOCK_NAME: '.card-15';
// 変数
$color_primary: #ef5ba1;
$color_white: #fff;
$color_black: #333;
$color_gray: #58595b;
$duration_default: 0.28s;
$duration_border: $duration_default / 4;
#{ $BLOCK_NAME } {
// 表示用背景
&__bg {
padding: 16px;
background: #eee;
}
display: block;
max-width: 360px;
color: $color_black;
transition: $duration_default;
&:hover {
color: $color_primary;
}
&__img {
position: relative;
width: calc(100% - 20px);
}
&__img-border {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
&::before,
&::after {
position: absolute;
content: '';
background: $color_primary;
transition-duration: $duration_border;
}
&::before {
width: 0;
height: 2px;
@at-root #{ $BLOCK_NAME }:hover & {
width: 100%;
}
}
&::after {
width: 2px;
height: 0;
@at-root #{ $BLOCK_NAME }:hover & {
height: 100%;
}
}
&:nth-of-type(1) {
&::before {
top: 0;
right: 0;
transition-delay: $duration_border * 3;
@at-root #{ $BLOCK_NAME }:hover & {
transition-delay: 0s;
}
}
&::after {
top: 0;
left: 0;
transition-delay: $duration_border * 2;
@at-root #{ $BLOCK_NAME }:hover & {
transition-delay: $duration_border;
}
}
}
&:nth-of-type(2) {
&::before {
bottom: 0;
left: 0;
transition-delay: $duration_border;
@at-root #{ $BLOCK_NAME }:hover & {
transition-delay: $duration_border * 2;
}
}
&::after {
right: 0;
bottom: 0;
transition-delay: 0s;
@at-root #{ $BLOCK_NAME }:hover & {
transition-delay: $duration_border * 3;
}
}
}
}
&__content {
width: calc(100% - 20px);
padding: 66px 30px 29px;
margin-top: -40px;
margin-left: auto;
background: $color_white;
}
&__heading {
font-weight: bold;
}
&__text {
margin-top: 20px;
font-size: 12px;
}
&__category {
display: inline-block;
padding-right: 12px;
margin-right: 12px;
line-height: 1;
color: $color_gray;
border-right: 1px solid $color_gray;
transition: $duration_default;
@at-root #{ $BLOCK_NAME }:hover & {
color: $color_primary;
border-right-color: $color_primary;
}
}
&__date {
line-height: 1;
color: $color_gray;
transition: $duration_default;
@at-root #{ $BLOCK_NAME }:hover & {
color: $color_primary;
}
}
}