View difference between Paste ID: M0Jhv2yg and CEWf7UUj
SHOW: | | - or go back to the newest paste.
1
<!--
2
    Everything in here is required for the effect to work.
3-
    This is the source code for both the effects.
3+
    This is the source code for the vertical effect.
4
5
    author Gecko @RSTForums.com
6
-->
7
8
<!-- Stylesheet -->
9
<style>
10
.container {
11
    overflow: hidden;
12-
    width: 400px; /* Container width */
12+
13
}
14
.container img {
15
    position: relative;
16
}
17
</style>
18
19
<!-- Markup -->
20
<div class="container">
21
    <img src="http://www.g3x0.com/rst/images/mago-huge.jpg" />
22
</div>
23
24
<!-- jQuery -->
25
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
26
27
<!-- Hover Zoom Effect -->
28
<script>
29
$(function() {
30
    var container = $(".container");
31
    
32
    container.mousemove(function(e) {
33
        var parentOffset = $(this).offset();
34
        var y = e.pageY - parentOffset.top;
35-
        var x = e.pageX - parentOffset.left; 
35+
36
37
        if (image.height() > $(this).height())
38
            image.css({ top: - y / $(this).height() * image.height() + y + 'px' });
39-
        // Vertical
39+
40
41
});
42-
        
42+