<ul class="service-list-06">
<li><a class="service-list-06__item" href="#">
<div class="service-list-06__content">
<div class="service-list-06__icon"><img src="https://picsum.photos/id/1000/160/160" width="160" height="160" /></div>
<h3 class="service-list-06__heading">見出しが入ります</h3>
<p class="service-list-06__text">テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>
<div class="service-list-06__arrow"><i class="fas fa-long-arrow-alt-right"></i></div>
<div class="service-list-06__bg"></div>
</a></li>
<li><a class="service-list-06__item" href="#">
<div class="service-list-06__content">
<div class="service-list-06__icon"><img src="https://picsum.photos/id/1001/160/160" width="160" height="160" /></div>
<h3 class="service-list-06__heading">見出しが入ります</h3>
<p class="service-list-06__text">テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>
<div class="service-list-06__arrow"><i class="fas fa-long-arrow-alt-right"></i></div>
<div class="service-list-06__bg"></div>
</a></li>
<li><a class="service-list-06__item" href="#">
<div class="service-list-06__content">
<div class="service-list-06__icon"><img src="https://picsum.photos/id/1002/160/160" width="160" height="160" /></div>
<h3 class="service-list-06__heading">見出しが入ります</h3>
<p class="service-list-06__text">テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>
<div class="service-list-06__arrow"><i class="fas fa-long-arrow-alt-right"></i></div>
<div class="service-list-06__bg"></div>
</a></li>
</ul>
ul.service-list-06
each item in items
li
a.service-list-06__item(href=item.link)
.service-list-06__content
.service-list-06__icon
img(src=item.icon, width=160, height=160)
h3.service-list-06__heading #{ item.heading }
p.service-list-06__text #{ item.text }
.service-list-06__arrow
i.fas.fa-long-arrow-alt-right
.service-list-06__bg
{
"items": [
{
"link": "#",
"icon": "https://picsum.photos/id/1000/160/160",
"heading": "見出しが入ります",
"text": "テキストが入ります。テキストが入ります。テキストが入ります。"
},
{
"link": "#",
"icon": "https://picsum.photos/id/1001/160/160",
"heading": "見出しが入ります",
"text": "テキストが入ります。テキストが入ります。テキストが入ります。"
},
{
"link": "#",
"icon": "https://picsum.photos/id/1002/160/160",
"heading": "見出しが入ります",
"text": "テキストが入ります。テキストが入ります。テキストが入ります。"
}
]
}
$BLOCK_NAME: '.service-list-06';
// 変数
$color_text: #687086;
$color_bg_white: #fff;
$color_bg_gray: #f7f9fb;
$duration_default: 0.5s;
$easing_default: cubic-bezier(0.165, 0.84, 0.44, 1);
$easing_opacity: cubic-bezier(0.895, 0.03, 0.685, 0.22);
#{ $BLOCK_NAME } {
display: flex;
&__item {
position: relative;
display: block;
padding: 48px 48px 72px;
&:hover {
z-index: 1;
}
}
&__content {
position: relative;
z-index: 1;
transition: transform $duration_default $easing_default;
@at-root #{ $BLOCK_NAME }__item:hover & {
transform: translateY(-24px);
}
}
&__icon {
width: 40px;
height: 40px;
overflow: hidden;
border-radius: 50%;
& > img {
width: 100%;
}
}
&__heading {
margin-top: 16px;
font-size: 24px;
}
&__text {
margin-top: 16px;
font-size: 14px;
color: $color_text;
opacity: 0;
transition: opacity $duration_default $easing_default;
@at-root #{ $BLOCK_NAME }__item:hover & {
opacity: 1;
}
}
&__arrow {
position: absolute;
right: 36px;
bottom: 36px;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
transition: all $duration_default $easing_default;
@at-root #{ $BLOCK_NAME } > li:nth-child(odd) & {
background: $color_bg_white;
}
@at-root #{ $BLOCK_NAME } > li:nth-child(even) & {
background: $color_bg_gray;
}
@at-root #{ $BLOCK_NAME }__item:hover & {
background: $color_bg_gray;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}
}
&__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
transition: all $duration_default $easing_default;
@at-root #{ $BLOCK_NAME } > li:nth-child(odd) & {
background: $color_bg_gray;
}
@at-root #{ $BLOCK_NAME } > li:nth-child(even) & {
background: $color_bg_white;
}
@at-root #{ $BLOCK_NAME } > li #{ $BLOCK_NAME }__item:hover & {
background: $color_bg_white;
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.05);
transform: scale(1.05);
transform-origin: bottom center;
}
&::before {
position: absolute;
bottom: 0;
left: 50%;
display: block;
width: 230%;
height: 230%;
content: '';
border-radius: 50%;
transition: all $duration_default $easing_default,
opacity $duration_default $easing_opacity;
transform: translate(-50%, 50%) scale(0);
@at-root #{ $BLOCK_NAME } > li:nth-child(odd) & {
background: $color_bg_white;
}
@at-root #{ $BLOCK_NAME } > li:nth-child(even) & {
background: $color_bg_gray;
}
@at-root #{ $BLOCK_NAME } > li #{ $BLOCK_NAME }__item:hover & {
opacity: 0;
transform: translate(-50%, 50%) scale(1);
}
}
}
}