.book{position:relative;text-align:center}.book-cover{position:absolute;z-index:1;width:100%;height:100%;transform-origin:0 50%;-webkit-transform-origin:0 50%;background:#111;background-size:cover;border-radius:6px;box-shadow:inset 4px 1px 3px #ffffff60,inset 0 -1px 2px #00000080;transition:all .5s ease-in-out;-webkit-transition:all .5s ease-in-out}.effect{width:20px;height:100%;margin-left:10px;border-left:2px solid #00000010;background-image:linear-gradient(90deg,#fff3,#fff0);transition:all .5s ease}.light{width:90%;height:100%;position:absolute;border-radius:3px;background-image:linear-gradient(90deg,#fff0,#fff3);top:0;right:0;opacity:.1;transition:all .5s ease;-webkit-transition:all .5s ease}.book:hover{cursor:pointer}.book:hover .book-cover{transform:perspective(2000px) rotateY(-30deg);-webkit-transform:perspective(2000px) rotateY(-30deg);transform-style:preserve-3d;-webkit-transform-style:preserve-3d;box-shadow:inset 4px 1px 3px #ffffff60,inset 0 -1px 2px #00000080,10px 0 10px -5px #00000030}.book:hover .effect{width:40px}.book:hover .light{opacity:1;width:70%}.book-inside{position:absolute;width:calc(100% - 2px);height:96%;top:2%;border:1px solid grey;border-radius:3px;background:#fff;box-shadow:10px 40px 40px -10px #00000030,inset -2px 0 gray,inset -3px 0 #dbdbdb,inset -4px 0 #fff,inset -5px 0 #dbdbdb,inset -6px 0 #fff,inset -7px 0 #dbdbdb,inset -8px 0 #fff,inset -9px 0 #dbdbdb}