<div class="l-wrapper">
<p class="c-text">Safari対応:<span class="c-text__bold">なし</span></p>
<div class="c-coin">
<img src="https://dl.dropbox.com/s/29p4abycpwfby4d/sample02.jpg?dl=0" class="c-coin__image" alt="sample02">
</div>
<p class="c-text u-mt-l">Safari対応:<span class="c-text__bold">あり</span></p>
<div class="c-coin -bugFix">
<img src="https://dl.dropbox.com/s/29p4abycpwfby4d/sample02.jpg?dl=0" class="c-coin__image" alt="sample02">
</div>
</div>
.l-wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
max-width: 500px;
margin: 0 auto;
padding: 50px;
}
.c-text {
font-size: 18px;
}
.c-text__bold {
font-weight: bold;
}
.c-coin {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
&.-bugFix {
z-index: 1;
}
}
.c-coin__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .3s;
.c-coin:hover & {
transform: scale(1.14);
}
}
.u-mt-l {
margin-top: 50px;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.