<figure class="Team-photo">
<img src="/v6-assets/img/jeremy-keith-2x.jpg" alt="Jeremy Keith" />
</figure>
{# <svg class="anim-wipe" viewbox="0 0 580 720">
<image class="wipe-image fouc" alt="{{ alt }}" opacity="0" href="{{ src }}" preserveaspectratio="xMidYMid slice" x="0" y="0" width="580" height="720"/>
<rect class="wipe-overlay" fill="#23d8a0" x="0" y="0" width="580" height="720"/>
</svg> #}
<figure class="Team-photo">
<img src="{{ src }}" alt="{{ alt }}" />
</figure>
{
"alt": "Jeremy Keith",
"src": "/v6-assets/img/jeremy-keith-2x.jpg"
}
.Team-photo {
position: relative;
overflow: hidden;
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--green);
animation: wipe 0.5s var(--confident-ease) 0.75s;
animation-fill-mode: forwards;
}
}
@keyframes wipe {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
No notes defined.