CODEWITHSUNDEEP
htmlcss
Tom Haddad
Tom Haddad

Reputation: 397

CSS: Making 'list-style-image's position on the image itself change upon hover

I currently have the following CSS to change the list image on a webpage:

.footer-list  li
{
list-style-image:url('images/footer/arrow.png');
padding-left:14px;
}

The image is comprised of a hover/non-hover version, with the original on top and the hover version below it.

I would like this list to begin by showing the top section (7x7px), then move to the bottom 7x7 section upon hover. I know how to do the hover part but not moving the section of the image being shown.

Hope this makes sense

Upvotes: 1

Views: 476

Answers (2)

Niels Keurentjes
Niels Keurentjes

Reputation: 41958

This is not possible with a list-style-image - the technique depends on being able to constrain the size of the image container so you can use background-position to 'scroll' to a different section of the background.

To get the similar effect on list images you'd need to split the image in 2 separate images.

Upvotes: 1

ElvinD
ElvinD

Reputation: 695

I don't get what you're exactly trying to imply but

just try to add this css

.footer-list  li:hover
{
 list-style-image:url('images/footer/arrow.png');
 padding-left:14px;
 margin-top: 14px;
}

Please provide a screenshot also or url.

Thanks!

Upvotes: 0

Related Questions