<a class="card-10" href="#">
<div class="card-10__img"><img src="https://picsum.photos/400/400" width="400" height="400" /></div>
<div class="card-10__content">
<h3 class="card-10__title">カード10</h3>
<p class="card-10__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
<div class="card-10__border"><span></span><span></span><span></span><span></span></div>
</div>
</a>
a.card-10(href=link)
.card-10__img
img(src=img, width=400, height=400)
.card-10__content
h3.card-10__title #{ title }
p.card-10__text #{ text }
.card-10__border
span
span
span
span
{
"link": "#",
"img": "https://picsum.photos/400/400",
"title": "カード10",
"text": "テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。"
}
$BLOCK_NAME: '.card-10';
// 変数
$color_white: #fff;
$color_bg: #000;
$offset_border: 32px;
$duration_default: 1s;
#{ $BLOCK_NAME } {
position: relative;
display: block;
max-width: 360px;
&__img {
overflow: hidden;
& > img {
transition: transform $duration_default, filter $duration_default;
@at-root #{ $BLOCK_NAME }:hover & {
filter: blur(3px);
transform: scale(1.1);
}
}
}
&__content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: #{$offset_border + 16px};
color: $color_white;
text-align: center;
&::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
background: $color_bg;
opacity: 0;
transition: opacity $duration_default;
@at-root #{ $BLOCK_NAME }:hover & {
opacity: 0.4;
}
}
}
&__title {
position: relative;
z-index: 2;
padding-bottom: 30px;
margin-bottom: 30px;
font-size: 20px;
opacity: 0;
transition: all $duration_default;
transform: translateY(10px);
@at-root #{ $BLOCK_NAME }:hover & {
opacity: 1;
transform: translateY(0);
}
&::before {
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 20px;
height: 1px;
margin: auto;
content: '';
background: $color_white;
}
}
&__text {
position: relative;
z-index: 2;
font-size: 12px;
opacity: 0;
transition: all $duration_default;
transform: translateY(10px);
@at-root #{ $BLOCK_NAME }:hover & {
opacity: 1;
transform: translateY(0);
}
}
&__border {
position: absolute;
top: $offset_border;
right: $offset_border;
bottom: $offset_border;
left: $offset_border;
z-index: 1;
& > span {
position: absolute;
display: block;
content: '';
background: $color_white;
opacity: 0;
transition: opacity $duration_default, transform $duration_default;
&:nth-child(1) {
top: 0;
bottom: 0;
left: 0;
width: 1px;
transform: scaleY(0.4);
@at-root #{ $BLOCK_NAME }:hover & {
opacity: 1;
transform: scaleY(1);
}
}
&:nth-child(2) {
top: 0;
right: 0;
bottom: 0;
width: 1px;
transform: scaleY(0.4);
@at-root #{ $BLOCK_NAME }:hover & {
opacity: 1;
transform: scaleY(1);
}
}
&:nth-child(3) {
top: 0;
right: 0;
left: 0;
height: 1px;
transform: scaleX(0.4);
@at-root #{ $BLOCK_NAME }:hover & {
opacity: 1;
transform: scaleX(1);
}
}
&:nth-child(4) {
right: 0;
bottom: 0;
left: 0;
height: 1px;
transform: scaleX(0.4);
@at-root #{ $BLOCK_NAME }:hover & {
opacity: 1;
transform: scaleX(1);
}
}
}
}
}