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.

VIEW DEMO

.pic {
border: 10px solid #fff;  
float: left;
height: 300px;
width: 300px;
margin: 10px;
overflow: hidden;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;  
}
.swip{
background: url("Your background image URL");
background-size:300px 300px;
display: inline;
}
.swip img{
margin-left: 0 px;
-webkit-transition: margin 2s ease;
-moz-transition: margin 2s ease;
-o-transition: margin 2s ease;
transition: margin 2s ease;
}
.swip img:hover{
margin-left: -300px;
}

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.

<div class="swip pic">
<img width="300" height="300" src="Original Image URL">
</img>
</div>

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
.