Recently I was testing some little strategy on my projects in which I need to show play icon on image hover. Showing play icon on image when someone navigate the cursor on that image. This was slightly tricky for me but I did it in a short while. So going to share this experience with my readers, which can learn from it and can do it better than this.
How to Show Play Icon On Image Hover:
In this guide we will show play icon on image hover with little work on HTML & CSS. You can use simply use your personal computer notepad to run below coding.
HTML Code:
<div class="itemsContainer"> <div class="image"> <a href="https://www.youtube.com"> <img src="https://www.example.com/Your-Pic.jpg" /></a> </div> <div class="play"> <a href="https://www.youtube.com"> <img src="https://www.example.com/Hover-Pic.png" /></a> </div> </div>
Above HTML, we also added link on Icon or the entire icon overlay. When someone click on icon then link would be work perfectly.
CSS Code:
<style>
.ImageContainer {
background: white;
float: left; //It also can be right OR left
position: relative;
width: 300px; // You can change its width OR height
height: 300px;
margin-right: 20px;
}
.ImageContainer:hover .play{display:block}
.play{
position: absolute;
display: none;
top: 0%;
margin: 0 auto;
left: 0px;
right: 0px;
z-index: 100;
opacity: 0.9; // Reduce the opacity to increase the background pic visibility
}
</style>
Above CSS is pretty straight forward to go ahead. First one section handles the image styling only.
ImageContainer
Whereas, second one shows the image hover styling. We setup recommended opacity but you can reduce it as you like to see it, opacity reduce the image hover colors or overlay and increase the actual background image visibility.
ImageContainer:hover
Furthermore, you can itself add your own custom CSS or html to modify the above code as your requirements.
Let us know, if you find this guidelines useful and valuable. Simply test this code in your code editors and if you found any issue or error then join us on our community forum to directly interact with us.
