Switching SVG background-image on hover, acting funny

[enbs]

When I hover over the radios the background-image is supposed to change to a different one. However it seems to start with a small image that then zooms up to the actual size requested…

This will be a star rating css based system.

Heres my code:

.animate { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }

div.rating_system {
    position: relative; float: left; clear: none; display: block;
    width: 260px; height: 50px;
}

div.rating_system input[type=radio] { display: none; visibility: collapse; }

div.rating_system input[type=radio] + label {
    position: relative; float: right; clear: none; display: block;
    width: 18.4%; height: 100%; margin: 0; padding: 0 2% 0 0;
    outline: 0; cursor: pointer;

    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" fill="%232C3E50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 110 105" style="enable-background:new 0 0 110 105;" xml:space="preserve"><ellipse opacity="0.3" cx="55" cy="52.5" rx="55" ry="52.5"/><path d="M55,8c25.9,0,47,20,47,44.5S80.9,97,55,97S8,77,8,52.5S29.1,8,55,8 M55,0C24.6,0,0,23.5,0,52.5c0,29,24.6,52.5,55,52.5s55-23.5,55-52.5C110,23.5,85.4,0,55,0L55,0z"/></svg>');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 40px;
}
div.rating_system input[type=radio]#star-5 + label { padding: 0 0 0 0; }

div.rating_system:hover > input[type=radio] + label:hover,
div.rating_system:hover > input[type=radio] + label:hover ~ label,
div.rating_system > input[type=radio]:checked ~ label {
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" fill="%232C3E50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 110 105" style="enable-background:new 0 0 110 105;" xml:space="preserve"><ellipse cx="55" cy="52.5" rx="55" ry="52.5"/></svg>');
}

<div class="rating_system">
            <input type="radio" id="star-5" name="rating-01" value="5" class="animate"><label for="star-5" class="animate"></label>
            <input type="radio" id="star-4" name="rating-01" value="4" class="animate"><label for="star-4" class="animate"></label>
            <input type="radio" id="star-3" name="rating-01" value="3" class="animate"><label for="star-3" class="animate"></label>
            <input type="radio" id="star-2" name="rating-01" value="2" class="animate"><label for="star-2" class="animate"></label>
            <input type="radio" id="star-1" name="rating-01" value="1" class="animate"><label for="star-1" class="animate"></label>
</div>

Do you guys have any clue what could be causing this?
Also the transitions doesn’t seem to work in Firefox…so that makes it appear as it works like it should. But if transitions are disabled in chrome/safari/opera it will look good. Just they are kinda necessary.

I am suspecting it has something to do with the background-size property, or maybe the hight of the radio label.

[Atelierbram]

Got to adept or remove the transition set by the animate class.

[enbs]

What would I use? Its not a color, its not fade. So I use all to target it. Is there a tag for transitioning an image switch?
And it doesn’t even work in FF.

[Atelierbram]

It swaps the entire background-image, so there is no transition that would work, doing it like this.

But if you would were going to use the use method with <symbol> like described in this blogpost, you would be able to transition the value for the fill property.

[Atelierbram]

http://codepen.io/atelierbram/pen/xwbQzv

[Author]

Posts