<a class="card-05" href="#"><img src="https://picsum.photos/400/200" width="400" height="200" alt="" /></a>
a.card-05(href=link)
img(src=img, width=width, height=height, alt='')
{
"link": "#",
"img": "https://picsum.photos/400/200",
"width": 400,
"height": 200
}
$BLOCK_NAME: '.card-05';
// 変数
$color_border: #ddd;
#{ $BLOCK_NAME } {
position: relative;
display: block;
max-width: 360px;
transition: padding 0.3s;
&:hover {
padding: 8px;
}
&::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
border: 1px solid $color_border;
}
& > img {
position: relative;
z-index: 1;
}
}