I've been working on creating a background that, when hovered over, reveals 2 buttons with different icons on them. I'm trying to change the color of these icons from black to white using CSS.
However, I'm facing an issue where I can't see the full icons in front of the buttons.
You can view my code here: http://jsfiddle.net/72XyL/225/
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: 25px;
height: 25px;
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: 25px;
height: 25px;
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: 25px;
height: 25px;
z-index: 2000;
}
.delete {
top: 45%;
left: 55%;
width: 25px;
height: 25px;
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;
}