Target an Image with CSS

[jkinsey]

Is is possible to target an image in a list in Glide? I know you can target an inline list by typing

[data-test=‘list-item’] .textStyle {
css
}

…but is it possible to do…

[data-test=‘list-item’] .imageStyle {
css
}

Thanks!

[ThinhDinh]

<pre><span><style>

[data-test="tile-item"] .tile-image-area img {
opacity: 0.5;
}

[jkinsey]

Does this work for inline lists too?

[ThinhDinh]

The code above was targetting an inline list. I was setting the opacity of all images to 0.5. Do you need anything more specific?

[jkinsey]

Are you able to adjust the margins? I’m trying and it’s not working.

[data-test=‘tile-item’] .tile-image-area img {
margin-left: -30px;
}

I’ll be a bit more specific - I was trying to move the image closer to the border of the list item (left) and am having a bit of trouble figuring out how to do so.

[ThinhDinh]

Like this?

It’s actually close, just target one level above.

<pre><span><style>

[data-test="tile-item"] .tile-image-area {
margin-left: -10px;
}

[jkinsey]

Does it differ based on whether I have the inline list in “list view” or tile view? (In your examples, you’re using the tiles version of inline list, I’m using the listed layout in inline list) Do I need to switch the code to

[data-test="list-item"] .list-image-area {

…or something like that as it is a different layout within the list?

I have a inline list, layout list, with text and an image. My end goal is to be able to shift the little circular image component to the left a bit.

[ThinhDinh]

@jkinsey

Does it differ based on whether I have the inline list in “list view” or tile view?

Yes, the code differs a bit when you use different layouts.

The image can be shifted left, but you have to do more work if you want to keep the text as is, since I think its position is “relative” to the image position.

[jkinsey]

Thank you so much! This really helps!