Breaking News: Grepper is joining You.com. Read the official announcement!

page curl effect

.Pdf answered on August 27, 2021 Popularity 3/10 Helpfulness 8/10

answer page curl effect

page curl effect

Comment

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

Popularity 3/10 Helpfulness 8/10 Language whatever

Source: stackoverflow.com

Tags: effect page-curl whatever

Link to this answer
Share Copy Link

Contributed on Aug 27 2021

.Pdf

0 Answers Avg Quality 2/10

page curl effect

Contents

More Related Answers

page curl effect

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.