Side pan Image on hover using CSS and HTML

Image-hover-HTML-CSS-Side-pan-image-on-hover

Image hover effects plays an important aspect in every website as it tends to attract visitors to you site or blog. Today also i have come up with a cool side pan image on hover effect code with simplified explanation for easier understanding.

VIEW DEMO

CSS CODING:

.pic {
border: 10px solid #fffff;
float: left;
height: 300px;
width: 300px;
margin: 20px;
overflow: hidden;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
}
.sidepan img {
margin-left: 0px;
-webkit-transition: margin 1s ease;
-moz-transition: margin 1s ease;
-o-transition: margin 1s ease;
-ms-transition: margin 1s ease;
transition: margin 1s ease;
}
.sidepan img:hover {
margin-left: -150px;
}

The above CSS code was used to frame around the image initially and the frame section was given in the .pic class of the CSS code.Then comes the main hover section .sidepan defines the properties of the image when mouse hover over it.While hovering the left margin was assigned to decrease by 150 pixels so that it will look like panning to the left side.If you want your image to pan right just change the “margin-left” to “margin-right”

HTML CODING:

<div class="sidepan pic">
<img src="........." width="400" height="400"> </img>
</div>

The HTML code of this was very simple all we have to do is placing our desired image inside a <div> tag and both the class “pic” and “sidepan” should be declared for the <div> in order to apply both the class properties to the image.Now your code will be ready and your images will be far more attractive than the beginning


7 Comments

  1. Jackson Mitchell

    I got here from google + well done on an excellent social media promotion

    Reply
  2. Rory

    Hi, very nice effect, but I am trying to do the pan to the right and it is not working. Changing margin-left to margin-right doesn’t do the job because the image is still aligned to the left in resting state.

    How do I make the right side of the image align with the right side of the border in the initial resting state, so that when I hover it can start to pan to the right to reveal the left.

    Thanks!

    Reply
    1. Rory

      Actually found out the answer, Swapping the margins does the trick:

      .sidepan img {
      margin-left: -150px;
      }
      .sidepan img:hover {
      margin-left: 0px;
      }

      Reply
    2. Frank Donald

      Glad you figured it by yourself. Don’t hesitate to ask if you need any further help, Cheers.

      Reply
  3. Anonymous

    how to make it in a frame

    Reply
  4. Anonymous

    all images effect are very nice and smoothy …. thank’s for sharing….

    Reply
    1. Frank Donald

      Thank You…Happy to hear it

      Reply

Leave a Comment

Your email address will not be published. Required fields are marked *