<header class="header">
<img class="header__twicpics-logo" src="https://assets.twicpics.com/videos/demo-twicpics/logo-white.png" alt="TwicPics logo" />
</header>
<main class="demo">
<section class="demo-content">
<div class="demo-content__gallery">
<div>
<div class="demo-content__gallery__img-container">
<img data-twic-src="media:refit/sneakers-10.jpg" alt="" />
</div>
<p class="demo-content__gallery__img-caption">Without the "refit" transformation</p>
</div>
<div>
<div class="demo-content__gallery__img-container">
<img data-twic-src="media:refit/sneakers-10.jpg" data-twic-transform="refit=WxH(4p)" alt="" />
</div>
<p class="demo-content__gallery__img-caption">With the "refit" transformation</p>
</div>
</div>
</section>
</main>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Montserrat", sans-serif;
color: #64748b;
}
.header {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
background-color: #9002ff;
}
.header__twicpics-logo {
width: 140px;
}
.demo {
padding: 50px 0;
width: 100%;
}
.demo-content {
margin: 0 auto;
padding: 0 20px;
max-width: 1100px;
}
.demo-content__gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.demo-content__gallery__img-container {
position: relative;
padding-top: 100%;
padding-top: 100%;
border-radius: 6px;
overflow: hidden;
background-color: rgb(233, 233, 233);
}
.demo-content__gallery__img-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.3s;
will-change: opacity;
}
.demo-content__gallery__img-container img.twic-done {
opacity: 1;
}
.demo-content__gallery__img-caption {
padding: 6px;
text-align: center;
font-style: italic;
font-weight: 500;
}
This Pen doesn't use any external CSS resources.