Site URL: https://mauve-decagon-kl9a.squarespace.com/
Hi,
Hoping someone can help, my question has 2 parts.
https://mauve-decagon-kl9a.squarespace.com/
website password: testimagehover
1. Change image on hover in a new auto list section.
I have partially worked out how to do this using the below code:
section[data-section-id="60dc62f6ab61a53e6b1da0e6"] .list-item-media-inner {
background-image: url(https://static1.squarespace.com/static/60d2fc7affbb93528c06a195/t/60dae15f28866c62c97e7113/1624957279616/SnailVibe_Website_Logo_home_white.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
section[data-section-id="60dc62f6ab61a53e6b1da0e6"] .list-item-media-inner img {
transition: opacity .2s linear;
}
section[data-section-id="60dc62f6ab61a53e6b1da0e6"] .list-item-media-inner:hover img {
opacity: 0;
}
But I would like to give each list item a different image on hover is this possible?
2. Change section background image on hover.
I have seen lots of guides on how to change image blocks but is it possible to change a section background image to a different image on hover?
Thanks in advance for the help I wouldn't have gotten this far without the aid of all the great free advice given on this forum.
S1lvermoth reacted to a post in a topic:
How do I create an animated counter?
