Neonmob overlay problem.

Watch the cursor on the image and the button, they change from one to the other. This shows that the image is still getting the pointer event to happen. For the overlay effect I just changed the opacity of the image while using the black background to my benefit.

by Joshua Powell

HTML

<div class="imgFrame">
    <img src="https://d1ld1je540hac5.cloudfront.net/icons/jaugntsqahxc.jpeg" alt="cardArt" />
    <span class="replaceBtn">Replace</span>
</div>
<span class="aboutTag">Watch the cursor on the image and the button, they change from one to the other. This shows that the image is still getting the pointer event to happen. For the overlay effect I just changed the opacity of the image while using the black background to my benefit.</span>

CSS

body {
    background: #1b1b1b;
}

body * {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.imgFrame {
    position: relative;
    width: 250px;
    margin-bottom: 20px;
}

.imgFrame img {
    width: 100%;
    border-radius: 5px;
    -webkit-transition: 0.5s ease all;
    cursor: pointer;
}

.replaceBtn {
    background: #af7ab0;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 1px 0 rgba(255, 255, 255, 0.4) inset;
    position: absolute;
    top: 50%;
    margin-top: -20px;
    left: 50%;
    margin-left: -35px;
    opacity: 0;
    -webkit-transition: 0.5s ease all;
    cursor: default;
}

.imgFrame:hover .replaceBtn {
    opacity: 1;
}

.imgFrame:hover img {
    opacity: 0.6;
}

.aboutTag {
    padding: 5px;
    background: rgba(255, 255, 255, 0.6);
    line-height: 250%;
}