Image swipe slider effect using CSS and HTML

Share on FacebookShare on Google+Tweet about this on TwitterShare on RedditShare on StumbleUponPin on Pinterest
swiping-image-hover-effects-html-css

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

CSS:

.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.

HTML :

<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
.

Share on FacebookShare on Google+Tweet about this on TwitterShare on RedditShare on StumbleUponPin on Pinterest

Related Designs and Schematics

The following two tabs change content below.

Frank Donald

Junior Network Engineer at Tata Communications
Frank Donald is an Electronics and Communication Engineer who is very passionate about his subject. Reading, Surfing and Blogging are the things he loves.

Ask your query

5 Comments on "Image swipe slider effect using CSS and HTML"

Notify of
avatar
Sort by:   newest | oldest | most voted
Zesty Zan
Guest

Do u have the code for photo swiping with background showing text/description I can input instead of another image?

Frank Donald
Guest

I will post it soon

peggy life ♥
Guest

Thanks Frank, i get it..

Frank Donald
Guest

You have to assign the background image in this way

background:urlcomment image)no-repeat;

Try this and post in your outcome…

Peggy
Guest

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; }

wpDiscuz