Fade image position

Question

I have a list like this:

<ul>
    <li><a href="#"><img src="/userfiles/test.png" alt="" /></a></li>
    <li><a href="#"><img src="/userfiles/test2.png" alt="" /></a></li>
</ul>

Each of these image is 950 pixels wide and 600 pixels in height.

The first 300 pixel in height is the mouse-out image and the last 300 pixel is the mouse-over image I want to fade over. Is this possible?

I have this CSS to control what image to show:

ul { list-style: none; padding: 0; margin: 0; }
ul li { width: 950px; height: 300px; overflow: hidden; position: relative; }
ul li img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

This code just moves the last 300 pixels of the image up, but instead of moving it I want to opacity fade the image over the "other":.

<script type="text/javascript">
        $(document).ready(function () {
            $("ul li img").mouseover(function () {
                $(this).stop().animate(
                    { top: "-300px" },
                    { duration: 300 })
            })
            .mouseout(function () {
                $(this).stop().animate(
                    { top: "0" },
                    { duration: 300 })
            })
        });
    </script>

I don't fully understand your question. Are you looking for some opacity feature depend on the mouse position? — avall, Sep 16 '11 at 09:10
Yes I want to fade the last 300 pixels of the image over the other on hover. — janhartmann, Sep 16 '11 at 09:10
Do you want to fade top image over bottom only? What should be done when you mouseover bottom image? — avall, Sep 16 '11 at 09:28
I need to fade the "bottom" image (last 300 pixels) over the "top" image (first 300 pixels) and when I move the mouse out it should fade top the "top" image. — janhartmann, Sep 16 '11 at 09:31
I'm not sure what you want to achieve, something like that: http://jsfiddle.net/v73AG/16/ — Mario, Sep 16 '11 at 09:33
BNot exactly. It should not move, but cross-fade the "two" images. — janhartmann, Sep 16 '11 at 09:43

score 2 · Accepted Answer · edited May 23 '17 at 10:24

2

Just finished implementing this, thanks for presenting a nice and reasonably short excercise.

First off, see the end result here.

Implementation notes:

Consider changing your markup if possible. This would have been so much easier (I would go so far as to say trivial) if you used the image as a background-image rather than a standalone img element, and it would also be more performant.
The solution works by adding a "sister" div for each img element and styling it appropriately. The most important is setting its background-image property, which allows us to show only the desired half of the picture.
The solution requires dynamically calculating the size of the source image, which I did using the solution presented here.

edited May 23 '17 at 10:24

Community

1
1

answered Sep 16 '11 at 10:01

Jon

428,835
81
738
806

I know the background image position would be MUCH better. But I needed this for a special case. This works just PERFECT! Awesome! – janhartmann Sep 16 '11 at 10:35
I have a odd problem, there is a short 'blink' effect on this test: http://detnyesort.dk.web111.curanetserver.dk/work.aspx - how is that possible? – janhartmann Sep 19 '11 at 10:12
@meep: No idea really -- I 'll take a look when I find some time, but no promises :) – Jon Sep 19 '11 at 16:28
No need! I missed some style sheet! Ignore previous request. You rock! ;-) – janhartmann Sep 21 '11 at 07:36

avall · Answer 2 · 2011-09-16T09:56:26.987

1

I think I've got the idea. The working example:

http://jsfiddle.net/avall/RMWt8/1/

The solution uses overflow style and play with layers (z-index).

It should be slightly upgraded because of center line bug when you go with your mouse from bottom to top but you should get the idea.

edited Sep 16 '11 at 09:56

answered Sep 16 '11 at 09:48

avall

2,025
2
16
28

Fade image position

2 Answers2