<a class="card-16" href="#">
<div class="card-16__img"><img src="https://picsum.photos/id/1000/400/200" />
<div class="card-16__img-mask"><svg viewBox="0 0 160 250">
<path d="M160,9.09494702e-13 L160,250 C83.8467314,250 30.5133981,250 0,250 C62.0781553,234.015625 80,103.660156 105.673828,55.0234375 C122.789714,22.5989583 140.898438,4.2578125 160,9.09494702e-13 Z"></path>
</svg></div>
</div>
<div class="card-16__content">
<p class="card-16__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
<p class="card-16__date">2021.00.00</p>
</div>
</a>
a.card-16(href=link)
.card-16__img
img(src=img)
.card-16__img-mask
svg(viewBox='0 0 160 250')
path(d='M160,9.09494702e-13 L160,250 C83.8467314,250 30.5133981,250 0,250 C62.0781553,234.015625 80,103.660156 105.673828,55.0234375 C122.789714,22.5989583 140.898438,4.2578125 160,9.09494702e-13 Z')
.card-16__content
p.card-16__text #{ text }
p.card-16__date #{ date }
{
"link": "#",
"img": "https://picsum.photos/id/1000/400/200",
"text": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。",
"date": "2021.00.00"
}
$BLOCK_NAME: '.card-16';
// 変数
$color_primary: #ce009f;
$color_white: #fff;
$color_black: #1a1a1a;
$color_gray: #8b8b8b;
$shadow_default: 10px 25px 30px rgba(0, 0, 0, 0.08);
$shadow_hover: 0 10px 15px rgba(95, 20, 78, 0.3);
$duration_default: 1s;
$easing_default: cubic-bezier(0.215, 0.61, 0.355, 1);
#{ $BLOCK_NAME } {
display: flex;
width: 540px;
min-height: 250px;
overflow: hidden;
font-family: 'Noto Sans JP', sans-serif;
background: $color_white;
box-shadow: $shadow_default;
transition: background-color 1s, box-shadow 1s;
&:hover {
background: $color_primary;
box-shadow: $shadow_hover;
}
&__img {
position: relative;
flex-shrink: 0;
width: 270px;
overflow: hidden;
& > img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center left;
transition: transform $duration_default;
@at-root #{ $BLOCK_NAME }:hover & {
transform: scale(1.1);
}
}
}
&__img-mask {
position: absolute;
top: 0;
right: 0;
bottom: 0;
& > svg {
height: 100%;
fill: $color_white;
transition: fill $duration_default;
@at-root #{ $BLOCK_NAME }:hover & {
fill: $color_primary;
}
}
}
&__content {
position: relative;
display: flex;
flex-direction: column;
padding: 40px 20px 25px 0;
margin-left: -20px;
}
&__text {
flex-grow: 1;
font-weight: 500;
color: $color_black;
transition: color $duration_default;
@at-root #{ $BLOCK_NAME }:hover & {
color: $color_white;
}
}
&__date {
flex-shrink: 0;
font-size: 14px;
font-weight: 400;
color: $color_gray;
letter-spacing: 1px;
transition: color $duration_default;
@at-root #{ $BLOCK_NAME }:hover & {
color: $color_white;
}
}
}