Image swipe slider effect using CSS and HTML

Image hover effects using simple HTML and CSS used widely in all websites to attract visitors. This post was all about swiping image hover effects using simple CSS programming.The idea behind this was using a background image below the original image and swipe it when hover and display the background image.Lets move into the coding part of this Image swipe slider Hover effect.

The above CSS coding comprises of two parts the class “.Pic” was used to provide the border box around the image and to avoid the overflow of the image when hovered.The next “.Swip” was the main part of the coding which defines a background image and causes the original image to swipe left when the mouse hovers the image.

HTML :

The HTML part of this coding was very simple and its sole purpose is to define both the “.Pic” and “.Swip” classes in a <div> tag to apply the both the class properties to the image.And that’s it with the coding very easy isn’t it? and now your image is ready to be swiped .