Image Slide hover effect using CSS and HTML

Image hover effects have been  quite interesting to work and moreover it enhances the beauty  of websites when added at right places. You might have come across many types of Image hover effects created using simple HTML and CSS codes. You are about to see some similar kind of simple image slide hover effect using CSS here. The main concept behind this effect is we are going to place a background image which will be hidden by the image placed above it. When hovered the image in the above slides to reveal the background image.

VIEW DEMO

AFTER HOVERING:

The above image illustrates the the sliding hover effect, how it reveals the image underneath creating a sliding effect. This hover effect works well with photo galleries and photography sites. The demo of this effect was added in this Demo effects page. Kindly consider that some of the effects in that page may not work due to blogger template, but i will assure it will work fine when you implement it separately. Lets move into the coding part of this effect.

CSS CODE:

.image{
          padding: 0;
          margin: 0;
         -webkit-box-sizing: border-box;
            }
.slide {
          background: url(Background Image URL)no-repeat; 
          display: inline-block;
          background-size: 400px 400px;
          }
.slide img{
          -webkit-transition: all 1s ease-in-out;
          -moz-transition: all 1s ease-in-out;
          -o-transition: all 1s ease-in-out;
           transition: all 1s ease-in-out;
                }
.slide img:hover
              {
                margin-left: 430px;
               }

In the above code  i have added a background image and assigned size for it in order to match the image above it. The key element of this hover effect lies in line 18 as i increase the left margin by 430 pixels to reveal the background image. and some transitions to make this effect look cooler.  And when the mouse is out from the image it returns back to its normal position. This element while moving may disturb other elements in the page so implementation should be done carefully.

HTML CODE:

<div class="slide image">
<img width="400" height="400" src="Your cover image URL here">
</img>
</div>

HTML part was very easy all you need to do is put your cover image in a <div> container with Class=” slide image”. This applies all the properties of the classes “slide” and “image” to your picture. Replace the Image URL’s and you are done now enjoy this effect and carefully implement it..