JSFiddle - React, Tailwind, and code Playground

by Asim Shariff

HTML

<div class="show-image">
    <div onclick="window.open('http://www.google.co.uk','mywindow');" style="cursor: hand;" class="update">
        <div class="img"></div>
    </div>
    <div onclick="window.open('http://www.google.co.uk','mywindow');" style="cursor: hand;" class="delete">
        <div class="img"></div>
    </div>
    <img src="http://www.doylecollection.com/var/doyle/storage/images/media/photo-galleries/the-dupont-circle-hotel-gallery/rooms/dupont-circle-hotel-superior-king-room/36016-1-eng-US/dupont-circle-hotel-superior-king-room_gallery_image.jpg" class="background" />
</div>

CSS

div.show-image {
    position: relative;
    float:left;
    margin:5px;
}
div.show-image:hover img {
    opacity:1;
}
div.show-image:hover div {
    display: block;
    opacity:1;
}
div.show-image div {
    position:absolute;
    display:none;
}

.background {width:600px;height:400px;}

.update {
    top:45%;
    left:30%;
    width: 250px;
    height:250px;
    margin-right: 4px;
    background-color: #de543e;
    padding: 16px 18px;
    cursor: pointer;
    opacity: 0.9;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    border-radius: 80px;
    z-index:1;
}
.show-image .update .img{
    background-color:#fff;
    -webkit-mask-image: url('http://www.clipartbest.com/cliparts/MiL/LKL/MiLLKLegT.png');
    width: 250px;
    height:250px;
    z-index:2000;
}
.show-image .delete .img {
    background-color:#fff;
    -webkit-mask-image: url('http://www.hdwallpapersinn.com/wp-content/uploads/2014/12/black-white-metro-calendar-icon.png');
    width: 250px;
    height:250px;
    z-index:2000;
}
.delete {
    top:45%;
    left:55%;
    width: 200px;
    height:250px;
    margin-right: 4px;
    background-color: #de543e;
    padding: 16px 18px;
    cursor: pointer;
    opacity: 0.9;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    border-radius: 80px;
}