# Target an Image with CSS

**URL:** https://community.glideapps.com/t/target-an-image-with-css/40614
**Category:** Ask for Help
**Created:** [April 11, 2022, 2:35pm UTC](https://community.glideapps.com/t/target-an-image-with-css/40614 "2022-04-11T14:35:57Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![jkinsey](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@jkinsey](https://community.glideapps.com/u/jkinsey)
#### Post date: [April 11, 2022, 2:35pm UTC](https://community.glideapps.com/t/target-an-image-with-css/40614/1 "2022-04-11T14:35:57Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [April 11, 2022, 11:50pm UTC](https://community.glideapps.com/t/target-an-image-with-css/40614/2 "2022-04-11T23:50:47Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/d/9d79f111868d188a395a7ae0d821fade71c23cbd.jpeg)

```auto
<pre><span><style>

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

```

---

<div class="post-metadata">

### Author: ![jkinsey](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@jkinsey](https://community.glideapps.com/u/jkinsey)
#### Post date: [April 11, 2022, 11:54pm UTC](https://community.glideapps.com/t/target-an-image-with-css/40614/3 "2022-04-11T23:54:45Z")

</div>

Does this work for inline lists too?

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [April 11, 2022, 11:56pm UTC](https://community.glideapps.com/t/target-an-image-with-css/40614/4 "2022-04-11T23:56:07Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![jkinsey](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@jkinsey](https://community.glideapps.com/u/jkinsey)
#### Post date: [April 11, 2022, 11:58pm UTC](https://community.glideapps.com/t/target-an-image-with-css/40614/5 "2022-04-11T23:58:15Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [April 12, 2022, 1:48am UTC](https://community.glideapps.com/t/target-an-image-with-css/40614/6 "2022-04-12T01:48:35Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/9/395bb617253577dc0e413138cfa44f47cdf972a5.jpeg)

Like this?

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

```auto
<pre><span><style>

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

```

---

<div class="post-metadata">

### Author: ![jkinsey](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@jkinsey](https://community.glideapps.com/u/jkinsey)
#### Post date: [April 12, 2022, 2:04am UTC](https://community.glideapps.com/t/target-an-image-with-css/40614/7 "2022-04-12T02:04:39Z")

</div>

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

```auto
[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.

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [April 12, 2022, 2:56am UTC](https://community.glideapps.com/t/target-an-image-with-css/40614/8 "2022-04-12T02:56:54Z")

</div>

> [@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.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/9/59d53f32cc7f8a18440243310af6d0301a5397a7.png)

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.

---

<div class="post-metadata">

### Author: ![jkinsey](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@jkinsey](https://community.glideapps.com/u/jkinsey)
#### Post date: [April 12, 2022, 3:29am UTC](https://community.glideapps.com/t/target-an-image-with-css/40614/9 "2022-04-12T03:29:36Z")

</div>

Thank you so much! This really helps!

---

<div class="post-metadata">

### Author: ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)
#### Post date: [April 13, 2022, 3:30am UTC](https://community.glideapps.com/t/target-an-image-with-css/40614/10 "2022-04-13T03:30:09Z")

</div>

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.