<div class="card-13">
<div class="card-13__img"><img src="/parts/img/components/card/card13/thumb.jpg" /></div>
</div>
.card-13
.card-13__img
img(src=img)
{
"img": "/parts/img/components/card/card13/thumb.jpg"
}
$BLOCK_NAME: '.card-13';
// 変数
$easing_default: ease-in;
#{ $BLOCK_NAME } {
position: relative;
width: 300px;
max-height: 450px;
overflow: hidden;
filter: drop-shadow(0 22px 62px rgba(9, 30, 66, 0.24));
border-radius: 10px;
cursor: pointer;
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
box-shadow: inset 0 -5px 4px rgba(9, 30, 66, 0.2);
}
&__img {
transition: transform 0.3s $easing_default;
& > img {
transition: transform 1.5s $easing_default;
}
@at-root #{ $BLOCK_NAME }:hover & {
transform: translateY(-10px);
& > img {
transform: translateY(-100px);
}
}
}
}