.root {
    position: relative;
    margin: 5px;
    display: inline-block;
}

.rootSimple {
    position: relative;
    margin: 5px;
    display: inline-block;
}

.rootInteractable {
    cursor: pointer;
}

.image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s ease;
    opacity: 1;
    backface-visibility: hidden;
}

.root:hover .image {
    opacity: .3;
    transition: all .3s;
}

.root:hover .icon {
    opacity: 1;
}

.root:hover .title {
    opacity: 1;
}

.icon {
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px;
    transition: .5s ease;
}

.title {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    padding: 10px;
    transition: .5s ease;
}