I want to use HTML to create an "opening" effect of one on top of another one.
After some research i figured out a way (see JSFiddle).

I now have the problem that the background image moves a little bit when the circle is resizing.

Can anyone help me figure out how to get the background image to stand still.

1. The image in the circle needs to keep same zoom level when opening.


2. The circle needs to be centered and the bottom half needs to be out of the window.

Circle css is this:

.circle {

    width: 0px;

    height: 0px;

    z-index: 10;

    position: absolute;

    border-radius: 50%;

    overflow: hidden;

    margin: 0 auto;

    left: 50%;

    -moz-transform: translate(-50%, 50%);

    -webkit-transform: translate(-50%, 50%);

    bottom: 0;

    -moz-transition: all 1.5s;

    -webkit-transition: all 1.5s;

}

JSFiddle: http://jsfiddle.net/GmvUQ/2/

Update,

Let me explain a little more. i notice that my question is not clear enough.
I have a few screenshot for the effect i want to create:

1st frame:

2nd frame

The entire effect is already working but when the transition is in progress (The circle with the image is getting bigger or smaller) the image inside the circle moves a little bit.

This is probably because of the calculations that need to be done by Javascript / CSS positioning.

I would like some help how to let this image stand entirely still during resize transition.

Thanks!

DEMO: http://jsfiddle.net/GmvUQ/5/

Updated HTML

<div>

    <div class="buttons">

        <button onclick="changeboleto(0)">Click here</button>

        <button onclick="changeboleto(500)">Click here</button>

        <button onclick="changeboleto(1000)">Click here</button>

    </div>

    <div class="circle girl">

    </div>

    <div class="circle lamborghini">

    </div>

</div>

Note that I've removed the nested </div> elements within each .circle. Instead I've added an extra class for each, which sets the background-image (and some positioning for them, if necessary).

Updated CSS

.circle {

    width: 250px;

    height: 250px;

    z-index: 10;

    position: absolute;

    border-radius: 50%;

    overflow: hidden;

    margin: 0 auto;

    background-repeat: no-repeat;

    background-size: cover;

    background-origin: content-box;

    background-position: center center;

}

.lamborghini {

    background-image: url(http://www.hdwallpapers.in/walls/2013_wheelsandmore_lamborghini_aventador-wide.jpg);

}

.girl {

    background-image: url(http://www.hdwallpapers.in/walls/colorful_background_girl-normal5.4.jpg);

    top: 50%;

}



.buttons {

    position: relative;

    z-index: 5;

}

I've moved most of the CSS in to the .circle class as it is common to both image sets. Pay special attention to the values for the background-* attributes.

Updated JQuery

function changeboleto(pix) {

    circleHeight = pix;

    circleWidth = pix;



    $('.circle').animate({

        'width' : circleWidth,

        'height': circleHeight

    }, 1500, 'linear');



    //css('width', circleWidth).css('height', circleHeight);

    changeCircleBackgroundToWindow();

}



function changeCircleBackgroundToWindow() {

    windowWidth = $(window).width();

    windowHeight = $(window).height();



    $(".circle > div").animate({

        'width' : windowWidth,

        'height': windowHeight

    }, 1500, 'linear');

    $(".circle > div").animate({

        'width' : windowWidth,

        'height': windowHeight

    }, 1500, 'linear');



    //$(".circle-background").css("width", windowWidth).css("height", windowHeight);

    //$(".circle-background2").css("width", windowWidth).css("height", windowHeight);

}

Rather than mix JQuery and CSS transitions I've lumped all the animation together in the JQuery.

I've used the animate() function and specified the easing method. The default easing is swing but I've used linear as this progresses the animation at a constant pace.

Edit

The solution above includes CSS that allows the image to scale with the animation. However you are requesting that the image stays at the same "zoom level" throughout.

To achieve this simply remove a line from the CSS, namely this one:

.circle {

    ...

    background-size: cover;

    ...

 }

I know this is 5 years too late, but I found this thread via a search engine and thought I'd provide my own thoughts.

This effect can also be achieved with clip-path, which is a bit more forgiving than jquery's animate (which can still result in image shakiness if you're animating certain/enough properties).

clip-path has the additional benefit of not needing javascript at all if you're doing, say, hovers rather than button clicks. It also results in a simpler HTML file.

I've made an updated version of the original question's jsfiddle, http://jsfiddle.net/GmvUQ/13/ which demonstrates doing this with clip-path. It's still using jquery to handle the button clicks, but the "magic" all happens via CSS transitions, rather than javascript animations.

JQuery:

function changeboleto(pix) {

    ...

    $('.circle-background').css('clip-path', 'circle(' + pix/2 + 'px at 50% 100%)');

}

CSS (including original CSS from original fiddle):

.circle-background {

    position: absolute;

    z-index: 10;

    clip-path: circle(0% at 50% 100%);

    background:url(http://www.hdwallpapers.in/walls/colorful_background_girl-normal5.4.jpg);

    background-size: cover;

    -webkit-transition: all 1.5s;

    -moz-transition: all 1.5s;

    bottom: 0%;

    left: 50%;

    -moz-transform: translateX(-50%);

    -webkit-transform: translateX(-50%);

}

What this does is simply cause the CSS to transition on the clip-path property, animating the circle expansion. Because the image itself never moves, just the boundaries between which it displays, it never shakes.

Full screen demo

JSFiddle: http://jsfiddle.net/7bP7Z/4/ (Click around to see things grow)

Okay, so now that the question has more clarification I have revisited the drawing board and have come up with a better solution.

HTML

<div class="circle">

    <div class="circle-overlay"></div>

    <img src="http://www.hdwallpapers.in/walls/2013_wheelsandmore_lamborghini_aventador-wide.jpg" />

</div>



<div class="circle">

    <div class="circle-overlay"></div>

    <img src="http://www.hdwallpapers.in/walls/colorful_background_girl-normal5.4.jpg" />

</div>

Note the changes to the structure:

• A containing element


• An "overlay" element


• An </img>
  

CSS

.circle {

    position: relative;

    overflow: hidden;

}



.circle-overlay {

    position: absolute;

    left: 50%;

    margin-left: -150px;

    bottom: -150px;

    border-radius: 50%;

    width: 300px;

    height: 300px;

    box-shadow: 0px 0px 0px 3000px white;

}

Nice and simple CSS!

The majority of the code is used to position our .circle-overlay class. This class provides a transparent circle (using border-radius) and utilises one of my favourite new CSS features - box-shadow - to apply a solid, white "outline" of an arbitrarily large value that covers the image below it. Have a play with the colour and size (adjust the 300px value) of the box-shadow to see how this works.

JQuery

$('.circle').click(function() {

    var c = $(this).children('.circle-overlay');

    var w = c.width() + 100;



    c.animate({

        'width' : w,

        'height': w,

        'bottom': (w*-0.5),

        'margin-left': (w*-0.5)

    }, 500, 'linear');

});

Once again, keeping things nice and simple!

The above JQuery performs a very simple task. It increases the size of the circle-overlay whilst maintaining its bottom, centre positioning on every click.

This should be a very smooth animation and the image should not "judder" or "shake" as the image is not being manipulated.