Animating the background-size property doesn't seem to be working in Chrome or Safari.
div {
width: 161px;
height: 149px;
background: url(http://3.bp.blogspot.com/_HGPPifzMEZU/Rw4ujF12G3I/AAAAAAAAAWI/bc1ppSb6eKA/s320/estrelas_09.gif) no-repeat center center;
background-size: 50% 50%;
transition: background-size 2s ease-in;
-moz-transition: background-size 2s ease-in;
-web-kit-transition: background-size 2s ease-in
}
div:hover {
background-size: 100% 100%
}
<div>
hey
</div>
It's not widely supported. See a complete list of CSS properties that support transition here. I would have a different approach. Wrap your element with background-color
you wanted to do transition to, and do a scale transition for your element.
<div class="your-wrapper">
<div class="your-div">
</div>
</div>
also make sure to add proper styling
.your-wrapper {
overflow:hidden
}
.your-div {
transition: transform 0.5s;
-webkit-transition: -webkit-transform 0.5s
}
.your-wrapper:hover .your-div{
transform: scale(1.5); -webkit-transform: scale(1.5);
}
This should do.