/*Book Opening Hover Effect*/ .book{ --open-time: 1s; } .book{ transform: perspective(2000px); transition: all var(--open-time); position: relative; } .book .book-open{ transition: all var(--open-time); transform-origin: left; } .book:hover .book-open{ transform: perspective(2000px) rotateY(-135deg); } .book>.elementor-widget-wrap{ box-shadow: inset 300px 0px 50px rgba(0,0,0,0.5); transition: all var(--open-time) !important; } .book:hover>.elementor-widget-wrap{ box-shadow: inset 20px 0px 50px rgba(0,0,0,0.5); } .book:hover{ transform: perspective(2000px) translateX(40%); z-index: 10 !important; } .book-text{ position: absolute; left: 0; top: 0; } /*RESPONSIVE*/ @media (max-width: 767px) { .book:hover .book-open{ transform: unset; } .book>.elementor-widget-wrap{ box-shadow: none; } .book:hover>.elementor-widget-wrap{ box-shadow: none; } .book:hover{ transform: unset; } .book-text{ position: relative; } }