Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

css3 background-size cover to percentage animation zoom

css3 background-size cover to percentage animation zoom

Problem

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

Problem courtesy of: Peter J Harrison

Solution

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;
}

Demo

Solution courtesy of: vals

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

css3 background-size cover to percentage animation zoom

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×