I'm having trouble placing a social button on top of an iframe that contains a YouTube or Vimeo video. The social buttons are located within a div container, which reveals or hides the content with JavaScript. However, I'm experiencing a blinking effect when I hover over the button. Can someone assist me in preventing this blink effect? I am currently using JavaScript, but I am open to CSS-only solutions as well.
Here is the jsfiddle code for reference --> http://jsfiddle.net/QYpKH. Special thanks to Tyler Rafferty for uploading the file
HTML
<div class="overlaySharing">
<div id="overlayIcons">
<div class="row">
<div class="col-lg-12">
<a href="http://www.facebook.com/sharer.php?u=<?php echo $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ?> ">
<div style="float: left; margin-right: 10px; margin-bottom: 10px; width: 250px;">
<div class="buttonFb"><span class="facebook"></span>Share on Facebook</div>
</div>
</a>
<a href="http://twitter.com/share?url=<?php echo $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ?>&text=<?php echo $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ?> <?php the_title(); ?>">
<div style="float: left; margin-right: 10px; margin-bottom: 10px; width: 250px;">
<div class="buttonTw"><span class="twitter"></span>Share on Twitter</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="showButtons" onmouseover="document.getElementById('overlayIcons').style.display = 'block';" onmouseout="document.getElementById('overlayIcons').style.display = 'none';">
<iframe src="//player.vimeo.com/video/80871338" width="100%" height="500" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
CSS
.overlaySharing {
padding: 0;
position: relative;
transition: opacity 0.4s ease 0s, top 0.25s ease 0s;
width: 100%;
z-index: 500;
}
#overlayIcons {
padding: 0;
top: 50px;
position: absolute;
width: 100%;
z-index: 6000;
}
.showButtons {
width: 100%;
height: 500px;
}
/* Button Styles */
.buttonFb {
display: inline-block;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#599Bdc), color-stop(100%,#3072B3));
/* Other styles omitted for brevity */
}
.buttonTw {
display: inline-block;
background: #58bfd8; /* Old browsers */
/* Other styles omitted for brevity */
}