Jump to content

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

Recommended Posts

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?

Edited by mirgart
Link to comment
13 hours ago, mirgart 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.

image.thumb.png.d74343693a5ee1c88105f24cd7e5ad98.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

image.thumb.png.d74343693a5ee1c88105f24cd7e5ad98.png

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

Link to comment
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.

image.thumb.png.d74343693a5ee1c88105f24cd7e5ad98.png

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!

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
  • 2 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.