Change Image on Hover in Pure CSS
In this post I am going to share simple CSS code snippet to Change Image on Hover. If you are looking to add swap image feature while visitor hover on any image then this pure CSS code is for you. You can easily integrate this code snippet in your web based project and apply Change Image on Hover effect to display front and back part of image.
HTML
Here we use HTML5 figure element and place image front and back part.
<figure class="swap-on-hover"> <img class="swap-on-hover__front-image" src="https://c402277.ssl.cf1.rackcdn.com/photos/1620/images/carousel_small/bengal-tiger-why-matter_7341043.jpg?1345548942"/> <img class="swap-on-hover__back-image" src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg"/> </figure> |
CSS
Now adding CSS and making your images changeable while hover. By default image front look will display and when ever you hover on image you can display back part of image.
body { background-color: orange; margin: 50px auto; box-sizing: border-box; } .swap-on-hover { position: relative; margin: 0 auto; max-width: 400px; } .swap-on-hover img { position: absolute; top:0; left:0; overflow: hidden; width: 400px; height: 400px; } .swap-on-hover .swap-on-hover__front-image { z-index: 9999; transition: opacity .5s linear; cursor: pointer; } .swap-on-hover:hover > .swap-on-hover__front-image{ opacity: 0; } |
See live demo and download source code.
DEMO
This awesome script developed by creativeprogrammer, Visit their official codepen repository for more information and follow for future updates.