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
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
.
Do u have the code for photo swiping with background showing text/description I can input instead of another image?
I will post it soon
Thanks Frank, i get it..
You have to assign the background image in this way
background:url(http://…….jpg)no-repeat;
Try this and post in your outcome…
sorry about that, i apply this in my sites but the second background could not work.
.swip{
background:"IMAGE/background 66.jpg";
background-size:900px 319px;
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: -900px!}