CSS3 background effect like in powerpoint

Problem

is it possible to make effect in picture in CSS3? Is some kind of powerpoint effect. image expanding, background hiding

Lets say, my background is that blue color, i need expand image (yellow color) after clicking on this box. Of course, here is missing 4th image where is image full visible without that blue background.

I need expand it in 25(maybe 30)deg angle and of course reverse function (showing background and hiding image in this way) too.

Important, that frame must stay there always.

Can someone help me ?

Thank you

My code: HTML

<div id="day6c" class="frames6">
    <div id="day6">
        6
    </div>
</div>

SCSS

@mixin frame($design, $frame) {
    background-image: url("../img/design-frames/"#{$design}".png"), url("../img/frames/"#{$frame}".png");
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    height: 239px;
    line-height: 239px;
    vertical-align: middle;
    text-align: center;
    font-size: 70px;
    margin-bottom: 20px;
    @include box-shadow(0px 2px 5px #9f9f9f);
}

.frames6 {
    @include frame("6", "frame5");
    position: relative;
    overflow: hidden;

    div {
        background-color: $frames-bg-red;
        color: $frames-font-red;
        position: relative;
        z-index: -1;
    }
}

functionality of that bg "yellow" image has not been implemented yet, but it is not hard if i can that .frames6#div "hide"

Probably i need to say, the yellow "image" should NOT be in angle, but just expanding in that angle, it should look normal

Problem courtesy of: Daniel Rossko Rosa

Solution

You can set body{overflow:hidden;} and create two big blue divs to cover the yellowimage initially and animate when the user click the button.

You can do something like this: DEMO

Solution courtesy of: Edwin

Discussion

Okay thanks for the code. It looks very complicated, so... I'm not going to untangle it. But I quickly fiddled around to mock up something like what follows. I think it accomplishes what you want, though you need to modify it to whatever behaviour or code you are looking for / have. The stamp outline will be a bit more difficult, but could be accomplished by positioning another div absolute over it with a cut out shape. If you want to make sure the yellow image does not go in that angle, you might have to add another div inside and skew it in the reverse angle. This works. Sometimes. its finicky.

It's a combo of a couple of CSS3 techniques so it won't work on older browsers. I tested it in Safari, for other browsers you might have to add more prefixes..

HTML

<div id="anim">
    <div id="next">

    </div>
</div>

CSS

#anim {
    width: 500px;
    height: 500px;
    position: relative;
    overflow: hidden;
    background: blue;
}
#anim #next {
    width: 110%;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    overflow: hidden;
    background: yellow;
    -webkit-transform: skewY(-9deg) translate(-50%,-50%);
    transition: all 500ms;
}
#anim #next.anim {
    height: 120%;
    top: -10%;
    left: -10%;
    -webkit-transform: skewY(-9deg) translate(0,0);
}

JAVASCRIPT (this was for testing)

window.onload = function(){
    setTimeout(function(){
        document.getElementById("next").className="anim";
    }, 1000);
}

Hope this helps. Good luck!

Discussion courtesy of: somethinghere

This recipe can be found in it's original form on Stack Over Flow.