view-ui-plus/src/styles/components/image.less

A high quality UI components Library with Vue.js 3

@image-prefix-cls: ~"@{css-prefix}image";

.@{image-prefix-cls} {
    display: inline-block;
    position: relative;
    &-img,
    &-error,
    &-placeholder,
    &-mark,
    &-inner{
        width: 100%;
        height: 100%;
    }
    &-inner {
        position: relative;
    }
    &-img {
        vertical-align: middle;
    }
    &-img-hidden{
        visibility: hidden;
    }
    &-cursor {
        cursor: pointer;
    }
    &-error,
    &-placeholder,
    &-mark {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }
    &-mark {
        background-color: rgba(0, 0, 0, .3);
        z-index: 1;
        color: #FFF;
        cursor: pointer;
        cursor: pointer;
        opacity: 0;
        transition: opacity .3s;
    }
    &-inner:hover {
        .@{image-prefix-cls} {
            &-mark {
                opacity: 1;
            }
        }
    }
}