:global .upload-list-picture { position: relative; .ant-upload-list{ margin-top: 50px; } .ant-upload-select-picture-card{ background-color: transparent !important; border-style: none !important; } .ant-upload-list-picture-card .ant-upload-list-item { border-style: none; display: flex; margin:0; :first-child{ // height: 100%; flex: 1; } } .ant-upload-list-item-info::before { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); opacity: 0; -webkit-transition: all .3s; transition: all .3s; content: ' '; } .ant-upload-list-item:hover .ant-upload-list-item-info::before{ opacity: 1; } .ant-upload-list-item-card-actions.picture{ position: absolute; top: 50%; left: 50%; z-index: 10; opacity: 1; transform: translate(-30%, -50%); white-space: nowrap; } .ant-upload-list-item-card-actions .anticon{ color: #fff; } .ant-upload-list-item-uploading.ant-upload-list-item{ background-color: transparent !important; } .ant-upload-animate-enter { animation-name: uploadAnimateInlineIn; } .ant-upload-animate-leave { animation-name: uploadAnimateInlineOut; } .ant-upload-list-item-name{ position: absolute; top:68px; margin: 0; padding: 0; font-size: 12px; display: block; } .ant-upload-list-picture-card .ant-upload-list-item-thumbnail{ position: inherit; } .ant-upload-list-picture-card .ant-upload-list-item-thumbnail img{ margin: 0 auto; height: 60px; width: auto; max-width: 80px } .ant-upload.ant-upload-select-picture-card{ display: block; height: auto; position: absolute; top: 0; } } :global .upload-list-text{ } :global .ant-upload-list-item-info{ padding: 0 20px 0 4px; }