Change button (image) hover

Hi Liv,

The button is an input image and the :hover CSS you are using is a background image. A background image will not override an image.

It looks like this can only be accomplished using JavaScript: https://stackoverflow.com/questions/10331615/changing-image-for-button-on-hover

You could use CSS fliter to change the appearance of the image on hover, but not swap out the image for another one: https://css-tricks.com/almanac/properties/f/filter/

Thank you!
-Tracy

Thanks Tracy!

Actually I fixed it now by switching back to the default text button and then overrule it with the background image. Like so:

.yikes-easy-mc-submit-button {
background:url(https://image-url)no-repeat;
width: 160px;
height: 160px;
cursor:pointer;
border:none;
display: inline-block;
text-indent: -99999px;
background-position: center center;
margin: 0 auto;
}

.yikes-easy-mc-submit-button:hover {
background:url(https://image-url)no-repeat;
background-position: center center;
}

Nice!