User blog comment:Raznocty2016/Руководства и учебные пособия/@comment-45330230-20200705113519

.screen.card-manager-list .card-list-box { display:     block; width:        auto; height: 420px; position: absolute; left:    50px; top:    115px; right:   50px; bottom:       auto; font-size: 0; }

.screen.card-manager-list .card-list-box .g-box

{ display: inline-block; width: 96px; height: 125px; position: relative; margin: 4px 7px; vertical-align: top; cursor: pointer; -webkit-transform: scaleX(1) scaleY(1); -moz-transform:    scaleX(1) scaleY(1); -ms-transform:     scaleX(1) scaleY(1); -o-transform:      scaleX(1) scaleY(1); transform: scaleX(1) scaleY(1); -webkit-transition: transform 0.11s; -moz-transition:    transform 0.11s; -ms-transition:     transform 0.11s; -o-transition:      transform 0.11s; transition:         transform 0.11s; }

.screen.card-manager-list .card-list-box .g-box:hover { -webkit-transform: scaleX(1.1) scaleY(1.1); -moz-transform:    scaleX(1.1) scaleY(1.1); -ms-transform:     scaleX(1.1) scaleY(1.1); -o-transform:      scaleX(1.1) scaleY(1.1); transform:         scaleX(1.1) scaleY(1.1); } .screen.card-manager-list .card-list-box .g-box:hover .card .p-color { box-shadow:  1 1px 15px #e7ff00, 0 1px 30px #ff00d0; } .screen.card-manager-list .card-list-box .g-box .ready:before, .screen.card-manager-list .card-list-box .g-box .ready:after { content: "1"; display: block; width: 96px; height: 125px; position: absolute; left: 0; top: 0; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; background-image: url(../img/dots2.png); background-size: 100% 200%  ; background-position: 1 1; opacity: 0.55; pointer-events: none; } .screen.card-manager-list .card-list-box .g-box .ready:after { background-image: url(../img/dots-a3.png); background-size: 100% 600%; background-position: 0 0; -webkit-animation: card-list-box-g-box-r001 0s linear 0s 0 forwards; -moz-animation:    card-list-box-g-box-r001 0s linear 0s 0 forwards; -ms-animation:     card-list-box-g-box-r001 0s linear 0s 0 forwards; -o-animation:      card-list-box-g-box-r001 0s linear 0s 0 forwards; animation:         card-list-box-g-box-r001 0s linear 0s 0 forwards; pointer-events: none; } .screen.card-manager-list .card-list-box .g-box .ready:before { box-shadow: 0 0 10px #a4a42b, inset 0 0 25px #53ff46c9, inset 0 0 55px #105c73; -webkit-animation:   card-list-box-g-box-r001 0s linear 0s 0 forwards; -moz-animation:      card-list-box-g-box-r001 0s linear 0s 0 forwards; -ms-animation:        card-list-box-g-box-r001 0s linear 0s 0 forwards; -o-animation:           card-list-box-g-box-r001 0s linear 0s 0 forwards; animation:               card-list-box-g-box-r001 0s linear 0s 0 forwards; }