/* Container needed to position the overlay. Adjust the width as needed */
.mw-rollover {
    position: relative;
    text-align: center;
    margin: 0 auto;
    max-width: 100%;
    /* width: 150px!important;*/
}

/* Make the image to responsive */
.mw-rollover-default_image {
    max-width: 100%;
}

/* The overlay effect (full height and width) - lays on top of the container and over the image */
.mw-rollover-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    text-align: center;
}

.mw-rollover-overlay:hover {
    cursor: pointer;
}

/* When you mouse over the container, fade in the overlay icon*/
.mw-rollover:hover .mw-rollover-overlay {
    opacity: 1;
}