Change Image on Hover in Pure CSS

by Posted on

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.
Change Image on Hover

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.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Published by admin