page curl 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%;
}