Search code examples
htmlcsshoverpan

How do I align an image within a pan/hover border/box?

Okay so the question was a bit difficult to word but I'm gonna try and explain this as clearly as possible.

I have a "pan on mouse hover" effect that I am trying to achieve. Everything is correct so far except the image pans to the left on mouse hover. I want it to start on the right of the image and pan to the right.

Simply changing the margin-left to margin-right perimeter doesn't work because the image is still aligned to the left within the 421x840 box.

So my question is, how do I align the image to the right within the box, so that when I hover the mouse, it pans to the right -150px and reveals the left part of the image.

I appreciate any help in advance. Thank you.

HTML code:

<div class="sidepan pic">
<img src="http://dvqlxo2m2q99q.cloudfront.net/000_clients/192648/file/19264814292KWf1.jpg" ></img>
</div>

CSS code:

.pic {
border: 0px;
    position: absolute;
float: left;
height: 840px;
width: 421px;
margin: 0px;
overflow: hidden;
}
.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;
}
Solution

  • Swapping margins it does the trick:

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

    Fiddle: http://jsfiddle.net/7ava1y31/42/