mirgart
-
Posts
6 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by mirgart
-
-
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!
-
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!
-
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: ******* -
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?
Help with Changing color of Scrolling
in Site Design & Styles
Posted
Is there a code to have multiple colors scrolling? Would you use nth-child in the code?
I have three items listed in my marquee and I'd love to have each item be a different color while it's scrolling. Could you help me with that, @tuanphan?