css3 background-size cover to percentage animation zoom

Question

Im trying to make a zoom effect with background-size. The issue I have is I need to animate from background-size:cover to something like background-size: 105%.

When I try this it with a "transition: 0.1s background-size linear" it animates from 0 to 104%.

Is there anyway I can animate from cover to that percentage with out going back to 0.

(im using cover because I don't know the size of the image but I have a fixed size div to display it in.)

Thanks Pete

Answer 1

One posibility is to have the background set in a pseudo element, and then do the zoom in the base element. (thru transform property, for instance)

 .test { width: 300px; height: 300px; position: relative; left: 30px; top: 30px; transition: all 1s; } .test:hover { -webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); } .test:after { content: ''; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background: url("http://lorempixel.com/600/400"); background-size: cover; } 

 <div class="test"> </div> 

Demo