CSS to create overlapping profile images

I want to turn a horizontal list of tiles into an overlapping list of tiles like you see in most social media apps. If you can figure this out using CSS, I’d be happy to compensate your time.

Turn this…

…into this (+2 not necessary):

image

2 Likes

Nevermind…figured it out :grin:

Screen Shot 2021-04-19 at 9.32.17 PM

<pre><span><style>
.tile-inner {
width: 80px;
}
.inner {
grid-template-columns: repeat(5, 40px) !important;
}
3 Likes

Just gotta add the border now.

3 Likes

Thanks for sharing, this is great!

1 Like
.tile-inner {
width: 87px;
}

.tile-image-area {
border: solid 5px white;
border-radius: 50%;
box-shadow: inset 0px 0px 0px 10px white;
}

.inner {
grid-template-columns: repeat(5, 55px) !important;
}

Screen Shot 2021-04-19 at 9.57.49 PM

12 Likes

I hope you compensated yourself handsomely :joy:

3 Likes

Great job. It looks really nice too!

Neat :wink:

Oh wow, simply gorgeous!

A doubt arose, you said you were planning to update your app in glide template store, but once we cannot use any code inside of it, can we when it’s an update?

Hm. Good pt. Glide doesn’t want templates with CSS because it’s confusing to new Glide users. Maybe if it’s well documented in your template instructions and it doesn’t impact the functionality or significantly alter the layout of the app…

Thanks! I should mention that we should use the horizontal, circular tile layout, 4 tiles wide to get the same effect.