Page curl effect with CSS

I just need a little help at page curl effect, everything works great when growing on hover, but when my mouse cursor is not on image, the gradient color shrinks nice, but the image goes immediately to small image, any ideas?

So basically the bigger image (the red one) has to shrink like it grows.

div {
    width: 100px;
    height: 100px;
   background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(243, 243, 243, 0.3) 45%, rgba(221, 221, 221, 0.3) 50%, rgb(170, 170, 170) 50%, rgb(187, 187, 187) 56%, rgb(204, 204, 204) 62%, rgb(243, 243, 243) 80%, rgb(255, 255, 255) 100%) repeat scroll 0% 0%, transparent url(https://dcassetcdn.com/profile_pics/12520/12520_thumbnail_100px_201403020352.jpg) no-repeat scroll 0% 0%; border: 0px none transparent;
    -webkit-transition:  3s; /* For Safari 3.1 to 6.0 */
    transition:  3s;
}

div:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(243, 243, 243, 0.3) 45%, rgba(221, 221, 221, 0.3) 50%, rgb(170, 170, 170) 50%, rgb(187, 187, 187) 56%, rgb(204, 204, 204) 62%, rgb(243, 243, 243) 80%, rgb(255, 255, 255) 100%) repeat scroll 0% 0%, transparent url(http://i.cdn.cnn.com/cnn/.e/img/3.0/global/misc/cnn-logo.png) repeat scroll 0% 0%; border: 0px none transparent;
    width: 400px;
    height:400px;
}

<div></div>

Solution

Some css trickery and magic

So after an hour or two i got this to work.

So what i did:
3 divs: Yellow image, red image, corner gradient.

Next we have the absolute and relative css properties. This is so they stack correctly on top of each other.

Now to the fun part:

Transitions

They way i hide the red image at on page load is: opacity.
Lets first take on the image disappearing when we take the cursor away:
On the #red element:
transition: opacity 0.1s 2.9s; So the delay is 2.9s We wait 2.9s because the heigh-width transition on the yellow element is 3, we match that transition.
That's how the image goes away.
Wait we delay it for that long?
but then the image would use 2.9s before it was displayed when we hover it.
Good observation this would indeed happen.
Here comes the sprinkle of magic:
on #red:hover we change the transition property!
Wait what?

#yellow:hover #red {
  opacity: 1;
  transition: opacity 0.1s;
}

Changes the #red on #yellow hover.
And (here comes the important part) we change the transition to have no delay. Could have written: transition-delay: 0s; but if we leave it out, it has the same effect.

#yellow {
  position: relative;
  width: 100px;
  height: 100px;
  background: url(https://dcassetcdn.com/profile_pics/12520/12520_thumbnail_100px_201403020352.jpg) no-repeat scroll 0% 0%;
  border: 0px none transparent;
  -webkit-transition: 3s;
  /* For Safari 3.1 to 6.0 */
  transition: width 3s, height 3s;
}

#yellow:hover {
  border: 0px none transparent;
  width: 400px;
  height: 400px;
}

#yellow:hover #red {
  opacity: 1;
  transition: opacity 0.1s;
}

#red {
  position: absolute;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(243, 243, 243, 0.3) 45%, rgba(221, 221, 221, 0.3) 50%, rgb(170, 170, 170) 50%, rgb(187, 187, 187) 56%, rgb(204, 204, 204) 62%, rgb(243, 243, 243) 80%, rgb(255, 255, 255) 100%) repeat scroll 0% 0%, transparent url(http://i.cdn.cnn.com/cnn/.e/img/3.0/global/misc/cnn-logo.png) repeat scroll 0% 0%;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0px none transparent;
  transition: opacity 0.1s 2.9s;
}

#corner {
  position: absolute;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(243, 243, 243, 0.3) 45%, rgba(221, 221, 221, 0.3) 50%, rgb(170, 170, 170) 50%, rgb(187, 187, 187) 56%, rgb(204, 204, 204) 62%, rgb(243, 243, 243) 80%, rgb(255, 255, 255) 100%) repeat scroll 0% 0%, transparent no-repeat scroll 0% 0%;
  width: 100%;
  height: 100%;
}

<div id="yellow">
  <div id="red"></div>
  <div id="corner"></div>
</div>

In my own personal opinion i like to have a visible transition:

#yellow {
  position: relative;
  width: 100px;
  height: 100px;
  background: url(https://dcassetcdn.com/profile_pics/12520/12520_thumbnail_100px_201403020352.jpg) no-repeat scroll 0% 0%;
  border: 0px none transparent;
  -webkit-transition: 3s;
  /* For Safari 3.1 to 6.0 */
  transition: width 3s, height 3s;
  background-size: cover;
}

#yellow:hover {
  border: 0px none transparent;
  width: 400px;
  height: 400px;
}

#yellow:hover #red {
  opacity: 1;
  transition: opacity 1s;
}

#red {
  position: absolute;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(243, 243, 243, 0.3) 45%, rgba(221, 221, 221, 0.3) 50%, rgb(170, 170, 170) 50%, rgb(187, 187, 187) 56%, rgb(204, 204, 204) 62%, rgb(243, 243, 243) 80%, rgb(255, 255, 255) 100%) repeat scroll 0% 0%, transparent url(http://i.cdn.cnn.com/cnn/.e/img/3.0/global/misc/cnn-logo.png) repeat scroll 0% 0%;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0px none transparent;
  transition: opacity 1s 1.7s;
}

#corner {
  position: absolute;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(243, 243, 243, 0.3) 45%, rgba(221, 221, 221, 0.3) 50%, rgb(170, 170, 170) 50%, rgb(187, 187, 187) 56%, rgb(204, 204, 204) 62%, rgb(243, 243, 243) 80%, rgb(255, 255, 255) 100%) repeat scroll 0% 0%, transparent no-repeat scroll 0% 0%;
  width: 100%;
  height: 100%;
}

<div id="yellow">
  <div id="red"></div>
  <div id="corner"></div>
</div>