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… [Screen Shot 2021-04-19 at 8.58.37 PM] …into this (+2 not necessary): [image]

.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]

Great job. It looks really nice too!

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…

[image] Lucas_Pires: Oh wow, simply gorgeous! Thanks! I should mention that we should use the horizontal, circular tile layout, 4 tiles wide to get the same effect.

[image] Robert_Petitto: .inner { grid-template-columns: repeat(5, 40px) !important; } has something changed? The border works perfectly, but the overlapping is not working anymore. Can you please help?

Hi, @Robert_Petitto ! :blush: When I saw this, I was very surprised to see how CSS can be used to create such a function. At the same time, I thought… I was wondering if it’s possible to make the white border a gradient like in the picture? If so, can you teach me how to do that? :blush: [IMG_5…

Hola @Anna-1 <pre><span><style> .tile-inner { width: 80px; } .tile-image-area { border: solid 5px red; border-radius: 50%; box-shadow: inset 0px 0px 0px 10px red; } .inner { grid-template-columns: repeat(5, 55px) !important; } have you tried changing the color from white to whatever color you ne…

Hola @Harsh I believe you need to set the orientation of your inline list, tile layout to Horizontal. I may be wrong. [Screen Shot 2021-06-30 at 1.11.32 PM]

CSS to create overlapping profile images

Community Resources

Robert_Petitto November 18, 2021, 3:41pm 28

I have a gamification tutorial on YouTube and here…but it’s probably overkill.

Topic		Replies	Views
CSS to display more than 4 horizontal tiles Ask for Help	10	730	July 3, 2022
More than 4 horizontal tiles Ask for Help	3	490	July 1, 2022
More tiles per row Feature Requests	15	846	September 27, 2022
Is there any CSS to make the borders of the tiles view even rounder? Ask for Help	5	456	July 15, 2021
Overlay text without Gradient Feature Requests	9	1604	May 21, 2020

CSS to create overlapping profile images

Related topics