Forum:
soooo i made some cute lil instagram type layouts for uploading pics to your profile!
heres the normal one for just photos :
<!-- (c) Layout created by chaos_kittyy -->
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; max-width: 480px; margin: auto;">
<div style="width: 120px; height: 120px; overflow: hidden; border-radius: 12px;">
<img src="INSERT URL HERE" style="width: 100%; height: 100%; object-fit: contain;"/>
</div>
<div style="width: 120px; height: 120px; overflow: hidden; border-radius: 12px;">
<img src="INSERT URL HERE" style="width: 100%; height: 100%; object-fit: contain;"/>
</div>
<div style="width: 120px; height: 120px; overflow: hidden; border-radius: 12px;">
<img src="INSERT URL HERE" style="width: 100%; height: 100%; object-fit: contain;"/>
</div>
<div style="width: 120px; height: 120px; overflow: hidden; border-radius: 12px;">
<img src="INSERT URL HERE" style="width: 100%; height: 100%; object-fit: contain;"/>
</div>
</div>
and heres one you can hover over and see little captions :))
<!-- (c) Layout created by chaos_kittyy -->
<style>
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
max-width: 480px;
margin: auto;
}
.gallery-item {
position: relative;
width: 120px;
height: 120px;
border-radius: 12px;
overflow: hidden;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.6);
color: #fff;
font-size: 12px;
padding: 5px;
text-align: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.gallery-item:hover .caption {
opacity: 1;
}
</style>
<div class="gallery">
<div class="gallery-item">
<img src="INSERT URL HERE" alt="Selfie 1"/>
<div class="caption">INSERT TEXT HERE</div>
</div>
<div class="gallery-item">
<img src="INSERT URL HERE" alt="Selfie 2"/>
<div class="caption">INSERT TEXT HERE</div>
</div>
<div class="gallery-item">
<img src="INSERT URL HERE" alt="Selfie 3"/>
<div class="caption">INSERT TEXT HERE</div>
</div>
<div class="gallery-item">
<img src="INSERT URL HERE" alt="Selfie 4"/>
<div class="caption">INSERT TEXT HERE</div>
</div>
</div>
lmk if you use them! i would love to check it out on your page! <33
xx - rainaaa
Report Topic
Permalink