/* -- LAYOUT -- */

.magnifying-glass {
    position: relative;
}

.magnifying-glass .main-image ~ .magnifying-glass-image {
    /*display: none;*/
    position: absolute;
}

.magnifying-glass .main-image:hover ~ .magnifying-glass-image {
    /*display: block;*/
}

/* -- SPACING -- */

.magnifying-glass .magnifying-glass-image {
    right: 30px;
    bottom: 30px;
}

/* -- EFFECTS -- */

.magnifying-glass .main-image ~ .magnifying-glass-image {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.magnifying-glass .main-image:hover ~ .magnifying-glass-image {
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
}