How to change image on hover in a Simple List section?

I'm very new to CSS, but I'm learning so much thanks to this community! I'm redesigning my company's website and on the "About Us" page I created a Simple List section to show each team member's picture, name, and job description. I like the look of it (spacing, font size, margins) and can't seem to get the exact same look using something other than the Simple List format, like image blocks. I want to hover a second image onto each individual picture. I've found helpful codes to hover on an individual image, but I'm not finding anything about hovering with "list item" content. 

On the website, if you scroll down, you'll be able to see the two areas I've tried this out on. The first one has individual codes for each team member and what I want the media content to look like with the hover effect. The section below that is the Simple List section that I'd actually like to use (because I like the spacing, font size, etc.). I found codes to create a grayscale to color hover effect, but I don't know where to begin on hovering a second image. 

Also, how do I create a code that targets only one specific Simple List section and not every list section I have on the site?

Your site is private. Can you setup password & share url again?

On 1/20/2022 at 9:55 PM, tuanphan said:

Your site is private. Can you setup password & share url again?

My bad- thanks!

Website: ******
Password: *******

13 hours ago, mirgart said:

My bad- thanks!

https://rhombus-chimes-c2yj.squarespace.com/config/settings
Ideology!

To change list item image to another image on hover, add a Code Block (anywhere on that page) >> paste this code

<style>
  li:nth-child(1):hover img {
    content: url(https://cdn.pixabay.com/photo/2021/12/23/13/25/flower-6889331__480.jpg);
}
li:nth-child(2):hover img {
    content: url(https://cdn.pixabay.com/photo/2022/01/18/03/16/deer-6946129__340.jpg);
}
li:nth-child(3):hover img {
    content: url(hhttps://cdn.pixabay.com/photo/2018/07/16/04/43/tea-3541205__340.jpg);
}
</style>

Repeat for other images. In demo code, I use random images with different size, so you will see misalign.

5 hours ago, tuanphan said:

To change list item image to another image on hover, add a Code Block (anywhere on that page) >> paste this code

<style>
  li:nth-child(1):hover img {
    content: url(https://cdn.pixabay.com/photo/2021/12/23/13/25/flower-6889331__480.jpg);
}
li:nth-child(2):hover img {
    content: url(https://cdn.pixabay.com/photo/2022/01/18/03/16/deer-6946129__340.jpg);
}
li:nth-child(3):hover img {
    content: url(hhttps://cdn.pixabay.com/photo/2018/07/16/04/43/tea-3541205__340.jpg);
}
</style>

Repeat for other images. In demo code, I use random images with different size, so you will see misalign.

THANK YOU! This is exactly what I was looking for. I appreciate the help!

7 hours ago, tuanphan said:

To change list item image to another image on hover, add a Code Block (anywhere on that page) >> paste this code

<style>
  li:nth-child(1):hover img {
    content: url(https://cdn.pixabay.com/photo/2021/12/23/13/25/flower-6889331__480.jpg);
}
li:nth-child(2):hover img {
    content: url(https://cdn.pixabay.com/photo/2022/01/18/03/16/deer-6946129__340.jpg);
}
li:nth-child(3):hover img {
    content: url(hhttps://cdn.pixabay.com/photo/2018/07/16/04/43/tea-3541205__340.jpg);
}
</style>

Repeat for other images. In demo code, I use random images with different size, so you will see misalign.

How do I make this change without affecting the first list on the page (the "what we do" icons list)? 

When I add this code, it changes the list images of the first list section (with the "What We Do" icons), when I only want it to change the second list section below of the team members' photos. Is there a way to do this?

Thank you!

16 hours ago, mirgart said:

How do I make this change without affecting the first list on the page (the "what we do" icons list)? 

When I add this code, it changes the list images of the first list section (with the "What We Do" icons), when I only want it to change the second list section below of the team members' photos. Is there a way to do this?

 

Thank you!

Add to Page Header

<style>
  .user-items-list-item-container[data-section-id="61dcaad988cf5b59e78bd8de"] img {
    content: unset !important;
}
</style>

Hi, Entering this conversation. I've got this to work. But have one question: Is there a way to add a CSS transition effect to the image so they fade into one another? I cannot seem to get that to work. Any advice is appreciated.

Try this code under

<style>
  li img, li:hover img {
  	transition: all 0.3s ease;
  }
</style>

Hello @tuanphan this is not working to me, still can see the flash when the images change. 😞

 

<style>
  li img, li:hover img {
  	transition: all 0.3s ease;
  }
</style>

On 1/26/2024 at 11:03 PM, Civic said:

Hello @tuanphan this is not working to me, still can see the flash when the images change. 😞

 

<style>
  li img, li:hover img {
  	transition: all 0.3s ease;
  }
</style>

Can you share link to page where you see problem on your site? I will check again